Hi currently i open my sidebar div before the content div and it floats to the right perfectly. However after a gander at the SEO forums it seems that this could cause potential problems as it seems some priority is given to items the higher it appears on the html source, therefore i would like to open my content before my sidebar. However when i move my sidebar after the content div and before the footer opens it just appears underneath the content? Why is this? Here is some more information: I float my sidebar to the right and i i simply set a margin-right on the content div for the sidebar to appear?
Did you set the sidebar to float:left? with the content set to float:left, sizes permitting it should go up right beside it.
thanks for the reply, this works if i set a width for the content div but i need it to change when the browser is resized hence why i used a margin-right rather than a fixed width? is there any way of doing this without setting a width for the content div
Well the sidebar is a fixed width i only want the content to be flexible. And if i set the content to a % then it will never be flush against the sidebar. This is bascially my layout minus header and footer: <wrap> <page> <content> </content> <sidebar> </sidebar> </page> </wrap> All i want is: content on the left, sidebar on the right. Sidebar fixed width and the content to be flexible and always flush against the sidebar. I cannot think of how to do it? Maybe i should put the sidebar in the content div? It works perfectly if i open the sidebar first but why not after!!
If the sidebar is fixed and content is fluid, you are stuck with putting it first. Since if its width isn't set it will fill the space and push the sidebar below it. So you have to put sidebar first with a float:right and a fixed width. Which basically puts it right back at where we started. I would just set the content to a high % and remove any padding/margin etc to make it slide up against the sidebar. Which is what you are effectively doing with the float:right.
Thanks for the help.. OK to go with your suggestion should i float both the content and sidebar to the left? The problem is when i set a high % then the sidebar doesn't have enough room, and then gets pushed below the content as the page gets smaller, and then if i set a lower % it is flush on a small window but then the gap gets between the content and sidebar widens as the browser size gets larger. How can i keep them flush regardless of browser size
I'd try around 70%. Long as you don't have anything set to a fixed width inside content you should be ok. If there's a gap it should be from padding/margins. Should go right beside each other, but I should check it first.
Thanks for the swift reply... My sidebar is at 300px..so if the content is 70% there isn't 300px left for it to fit in. If i put the content at 65% it will just fit in at max size, but as the browser window gets reduced the sidebar gets pushed underneath as the room left reduces if you understand me?
ya so go around 60% , test it to see what happens. Other than that it would be use yet another DIV wrapper which I wouldnt do.
i have to set it about 58% but this leaves a gap inbetween the content and sidebar if the sidebar is floated to the right or inbetween the sidebar and the edge of the body if the sidebar is floated to the left. what did you mean by putting it inside another div how could this help i am interested.
Well a little bit of a gap to the right is about as close as it can come. Using extra DIVs would still have that issue. More important that googlebot gets the content first.
Yeh i suppose i'll stick to this i thankyou for your help, rep added! would also be good to visit your site but could not find a link.. thanks again!
It can be done. Check out this example: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="imagetoolbar" content="no"> <meta name="description" content="A brief description of the current page goes here."> <meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished"> <style type="text/css" media="screen"> * { margin: 0; padding: 0; } body { background: #E0E0E0; color: #000; font: 85%/150% tahoma, verdana, arial, helvetica, sans-serif; letter-spacing: 1px; } h1, h2, h3, h4, h5, h6 { font: bold 1em/1.5 georgia, garamond, "times new roman", times, serif; } img { border: 0; vertical-align: bottom; } #container { background: #FFF; color: inherit; margin: 0 auto; width: 95%; } #header { background: #CEF; color: inherit; height: 80px; /* required, otherwise Firefox will collapse the DIV */ } #menu { background: #FDC; color: inherit; height: 2em; line-height: 2em; } #menu li { display: inline; list-style: none; white-space: nowrap; } #menu a { background: #9C6; color: #000; float: left; height: 2em; margin: 0 2px 0 0; padding: 0 0.5em; text-decoration: none; } #menu a:hover, #menu a:active, #menu a:focus { background: #C0D; color: #FFF; } #content { background: #F8F8EF; color: inherit; float: left; width: 100%; } #content .wrapper { background: #FFF; color: #000; margin: 0 300px 0 0; padding: 1em; overflow: hidden; } #sidebar { float: left; margin: 0 0 0 -300px; width: 300px; } #sidebar span { display: block; padding: 1em; } #footer { background: #F5F5F5; clear: left; color: #000; } #footer em { display: block; font-style: normal; padding: 0.25em 0 0.25em 1em; } </style> </head> <body> <div id="container"> <div id="header"> <img src="#" width="200" height="80" alt="Web Site Logo" title=""> </div> <ul id="menu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> <div id="content"> <div class="wrapper"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae dolor quis diam sodales sodales. Quisque massa leo, sagittis sed, rhoncus vitae, convallis nec, orci. Fusce lorem. Nullam ac dui. Mauris quis risus. Mauris volutpat. Ut sollicitudin magna ac arcu. Aliquam velit. Donec commodo tempus urna. Mauris mi purus, rutrum vel, aliquet ut, faucibus eget, purus. Phasellus tellus libero, iaculis ut, tempor malesuada, elementum et, urna. Proin vehicula viverra sapien. Integer eleifend, tortor et hendrerit vulputate, lectus enim pharetra risus, quis blandit nibh dui sed neque. Nunc nec odio vel odio porta fermentum. Sed quis arcu. Donec tristique scelerisque nibh. Nam lacinia libero a sem. Nunc volutpat, dui rutrum euismod sodales, ipsum dui accumsan libero, id consequat quam lorem vitae orci. </p> <p> Cras eu justo. Duis ornare ultrices urna. Integer eros. Nulla sagittis viverra purus. Sed massa quam, eleifend hendrerit, laoreet vel, auctor sit amet, nunc. Donec scelerisque. Cras sodales. Nulla facilisi. Ut molestie. Quisque rhoncus, nulla non auctor tincidunt, lectus sapien laoreet metus, non laoreet elit purus sollicitudin nulla. Praesent eget lacus sit amet sem elementum molestie. Etiam mattis eros quis libero. </p> </div> </div> <div id="sidebar"> <span>Sidebar Content Goes Here</span> </div> <div id="footer"> <em>Copyright &#169; 2006-2008, The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved.</em> </div> </div> </body> </html> Code (markup):
couldnt he just put a container around it to hold it all together? I may be wrong since im new but thats what i would do
Thanks for the example Dan you are the man it works great glad i've finally got the sidebar appearing after the content without altering the layout. Thanks again.
No problem wd_2k6. You'll want to pay particularly close attention to some of the CSS in there - such as the overflow property being set on #content .wrapper (to pre-emptively contain any floats inside the DIV that may be applied) and the IMG style rule for instance.