1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need Sidebar Help

Discussion in 'CSS' started by wd_2k6, Mar 7, 2008.

0
  1. #1
    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?
     
    wd_2k6, Mar 7, 2008 IP
  2. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #2
    Did you set the sidebar to float:left? with the content set to float:left, sizes permitting it should go up right beside it.
     
    shallowink, Mar 7, 2008 IP
  3. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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
     
    wd_2k6, Mar 7, 2008 IP
  4. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #4
    Use percentages?
     
    shallowink, Mar 7, 2008 IP
  5. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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!!
     
    wd_2k6, Mar 7, 2008 IP
  6. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #6
    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.
     
    shallowink, Mar 7, 2008 IP
  7. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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
     
    wd_2k6, Mar 7, 2008 IP
  8. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #8
    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.
     
    shallowink, Mar 7, 2008 IP
  9. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #9
    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?
     
    wd_2k6, Mar 7, 2008 IP
  10. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #10
    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.
     
    shallowink, Mar 7, 2008 IP
    wd_2k6 likes this.
  11. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #11
    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.
     
    wd_2k6, Mar 7, 2008 IP
  12. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #12
    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.
     
    shallowink, Mar 7, 2008 IP
  13. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #13
    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!
     
    wd_2k6, Mar 7, 2008 IP
  14. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #14
    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 &#38;#169; 2006-2008, The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved.</em>
			</div>
		</div>
	</body>
</html>
    Code (markup):
     
    Dan Schulz, Mar 7, 2008 IP
  15. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #15
    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 :p
     
    X.Homer.X, Mar 8, 2008 IP
  16. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #16
    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.
     
    wd_2k6, Mar 8, 2008 IP
  17. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #17
    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. :)
     
    Dan Schulz, Mar 8, 2008 IP