Screwed up my sidebar!

HTML & CSS
1

Hi again forum ppl and Happy New Year! :slight_smile:

So. After previous help here, I made progress with making the site responsive and with better text contrast.

To further improve things I had a go at media queries to hide my sidebar when loading the site on a phone, etc. This works to an extent however I now have a separate issue to my current problem with the desktop site.

My sidebar now ends up at the bottom-right hand corner of the page instead of next to the content and I cannot work out what I’ve done to mess it up.

[https://lazyd0g.plus.com] for the website.

My sidebar css

#sidebar
	{
	float: right;
	position: relative;
	width: 365px;
	background: #DEE0DD;
	padding-left: 5px;
	padding-right: 5px;
	color: #333333;
	}
	
	a:hover {
	color: #990099;
	text-decoration: none;
}

	
	#sidebar .title h2
	{
	font-size: 1.6em;
	padding-left: 10px;
	padding-right: 5px;
	padding-top: 10px;
	}

and the html

<div id="sidebar">
  <div class="title">
  <h2 class="title" style="text-align:center;"><img src="/images/P1080438.jpg" alt="teaching" width="304" height="354"/></h2>
</div>

If you need more html/css please let me know!

thanks for any help!

2

I think you wan’t the html for the sidebar before the content, within the container.

3

hmm… not sure what you mean?

4

You have the sideabar floated right, after your content.

This is exactly where I would expect it to be with thie html structure.

To float an element, the floated element must come before the content it is to float in and must be a sibling of that content.

1 Like
5

arrgghhh!!! :smiley: this stuff drives me mad!

managed to get it to move up and in but still can’t get it back to where it was in-line with the content!

can anyone please suggest what changes I need to make to my code and where!?

thanks.!

6

I took a look at your link, but it seems it’s not updated with your changes? The sidebar is still at bottom right as in the OP.

You could try float the “content” left to see what happens. :slight_smile:

7

thanks! floating left just pushes it left between the content and the footer.

It was really over to the right and at the bottom and now it’s where it is now.

I’m now trying to move it vertically up the page so that the top of the sidebar is level with “Welcome”.

It was there - I just managed to bugger things up somehow and my NAS with my backups fell off the shelf ( don’t ask! ) and trashed two of my raid 5 drives so I can’t go back to where I was! :sob:

I just can’t work out what I screwed up and it’s driving me nuts!

8

Please update your site so we can see what happens! :wink:

9

You have Content as float:inherit when I think you meant to make it float:left.

#content{float:left}

Then you would need to contain the floats at #page otherwise the parent does not contain the floats (use the clearfix technique or add overflow:hidden to #page assuming you don’t need visible overflow - or use any of the other float containing mechanisms.).

1 Like
10

Awesome! :slight_smile: Looks like that sorted that particular issue! Thank you!

If you live in London I’ll buy you a beer! I spent hours trying to fix that! :beer::beer:

2 Likes
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.