balushyno1 Posted January 10, 2012 Report Share Posted January 10, 2012 Im new to css and learning it, im stuck in floating lauout... What im doing wrong here? The menu is floated left and Content is floated right but whenever i want toadd a third column and float 2nd column to left it goes all the way left and cause some weird stuff,? like the screenshot i attached, http://i40.tinypic.com/2hmkd41.jpg Html: <body> <div class="wrapper"> <div class="header"> <h3>myBlog</h3> <p>Blog site</p> </div> <div class="content"> <div class="primary"> <div class="primary"> <h3>Lorem ipsum</h3> <p>Do your layouts deserve better than Lorem Ipsum? Apply as an art director and team up with the best copywriters at Jung von Matt: www.jvm.com/jobs/lipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget orci et erat vehicula interdum. Duis nec neque nec nisl volutpat facilisis eu vel felis. Nam ac tellus ac augue porttitor dictum. Curabitur ac justo lorem. Fusce suscipit faucibus est, quis tincidunt felis rhoncus ac. Quisque nisl risus, luctus eget adipiscing a, sollicitudin id nisi. Donec at sem lacus, rhoncus sollicitudin neque. Nunc risus lectus, mollis in bibendum eu, aliquam nec massa. Fusce eget orci diam, id luctus ligula. Proin elementum tempus ornare. Nulla sed velit imperdiet mauris vehicula ornare. Suspendisse imperdiet rutrum purus, in tincidunt diam molestie eu. Suspendisse nunc tellus, sodales sed feugiat at, ultricies at ante. Quisque quis ante nisi, in consectetur mauris. In hac habitasse platea dictumst. Nunc quis urna in velit pretium placerat. Donec placerat auctor vehicula. Vestibulum tristique aliquam faucibus. Etiam sagittis rhoncus ipsum nec dignissim. Phasellus pretium leo feugiat turpis condimentum rhoncus. Curabitur lacus eros, lacinia eget elementum vitae, lobortis non ligula. Donec convallis imperdiet mi, sit amet imperdiet dui venenatis sit amet. Donec sapien justo, interdum a pulvinar non, ullamcorper ut tortor. Mauris aliquam diam in mauris pharetra vel accumsan ligula imperdiet. Pellentesque semper, purus non sodales fermentum, erat mauris feugiat quam, nec mattis leo massa id ligula. </p> <div class="secondary"> </div></div></div> <div class="secondary"> <ul class="nav"> <li><a href="#">blog</a></li> <li><a href="#">About</a></li> <li><a href="#">contact</a></li> <li><a href="#">download</a></li> <li><a href="#">blog</a></li> <li><a href="#">tagGroup</a></li> <li><a href="#">checkList</a></li> </div> <div class="footer"> </body> Css: * { margin:0; padding:0; } body { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; background-color:#999; } .content .secondary ul { list-style:none; margin:0; padding:0; width:20%; float:left; background-color:#CCC; display:inline; } .content .secondary { background-color:#CCC; } .content .secondary ul a { color:white; text-decoration:none; margin-left:1.22em; } .wrapper { width:58%; margin: 0 auto; } .header { background-color:#333; height:110px; padding:5px; } .header h3 { color:white; text-shadow:3px 3px 3px #000; margin: 1em 0 0 2em; } .header p { color:white; font-size:12px; margin: 1em 0 0 2em; } .content .primary .primary { width:40%; background-color:white; } Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 10, 2012 Report Share Posted January 10, 2012 (edited) Try this:- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- * { margin:0; padding:0; } body { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; background-color:#999; } .secondary ul { list-style:none; margin:0; padding:0; /*width:20%;*/ /*float:left;*/ background-color:#CCC; display:inline; } .secondary { float: left; width:20%; background-color: yellow;/*#CCC;*/ } .secondary ul a { color:white; text-decoration:none; margin-left:1.22em; } .wrapper { width:58%; margin: 0 auto; background: teal; } .header { background-color:#333; height:110px; padding:5px; } .header h3 { color:white; text-shadow:3px 3px 3px #000; margin: 1em 0 0 2em; } .header p { color:white; font-size:12px; margin: 1em 0 0 2em; } .content .primary { float: right; width:40%; background-color:white; } .thirdcol { background: skyblue; } .footer { clear: both; background-color: green; } --> </style> </head> <body> <div class="wrapper"> <div class="header"> <h3>myBlog</h3> <p>Blog site</p> </div> <div class="content"> <div class="primary"> <!--<div class="primary">--> <h3>Lorem ipsum</h3> <p>Do your layouts deserve better than Lorem Ipsum? Apply as an art director and team up with the best copywriters at Jung von Matt: www.jvm.com/jobs/lipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget orci et erat vehicula interdum. Duis nec neque nec nisl volutpat facilisis eu vel felis. Nam ac tellus ac augue porttitor dictum. Curabitur ac justo lorem. Fusce suscipit faucibus est, quis tincidunt felis rhoncus ac. Quisque nisl risus, luctus eget adipiscing a, sollicitudin id nisi. Donec at sem lacus, rhoncus sollicitudin neque. Nunc risus lectus, mollis in bibendum eu, aliquam nec massa. Fusce eget orci diam, id luctus ligula. Proin elementum tempus ornare. Nulla sed velit imperdiet mauris vehicula ornare. Suspendisse imperdiet rutrum purus, in tincidunt diam molestie eu. Suspendisse nunc tellus, sodales sed feugiat at, ultricies at ante. Quisque quis ante nisi, in consectetur mauris. In hac habitasse platea dictumst. Nunc quis urna in velit pretium placerat. Donec placerat auctor vehicula. Vestibulum tristique aliquam faucibus. Etiam sagittis rhoncus ipsum nec dignissim. Phasellus pretium leo feugiat turpis condimentum rhoncus. Curabitur lacus eros, lacinia eget elementum vitae, lobortis non ligula. Donec convallis imperdiet mi, sit amet imperdiet dui venenatis sit amet. Donec sapien justo, interdum a pulvinar non, ullamcorper ut tortor. Mauris aliquam diam in mauris pharetra vel accumsan ligula imperdiet. Pellentesque semper, purus non sodales fermentum, erat mauris feugiat quam, nec mattis leo massa id ligula. </p> </div></div><!--</div>--> <!--<div class="secondary">--> <div class="secondary"> <ul class="nav"> <li><a href="#">blog</a></li> <li><a href="#">About</a></li> <li><a href="#">contact</a></li> <li><a href="#">download</a></li> <li><a href="#">blog</a></li> <li><a href="#">tagGroup</a></li> <li><a href="#">checkList</a></li> </ul> </div> <div class="thirdcol"><p>Third Column</p></div> <div class="footer"><p>Footer</p></div> </div><!--end of .wrapper--> </body> </html> I've added a doctype at the top, closed unclosed tags, deleted duplicate secondary divs, changed the styles from .content .secondary to just .secondary as .secondary isn't inside the .content div and a few other things. You can nest another div inside .content if you want, at moment it only has the nested .primary div inside. It validates with no errors. I'm not quite sure if it's what you want, but you can edit it. Edited January 10, 2012 by Wickham Quote Link to comment Share on other sites More sharing options...
balushyno1 Posted January 10, 2012 Author Report Share Posted January 10, 2012 yeah it worked and i also tried the same technique but i want the content on right which has white background to be in middle with css without touching html markup, if you float the content primary to left it goes all the way left causes menu and third col to go right. i want to position third col to right(sidebar) and content in wight background in middle like its main content. Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 10, 2012 Report Share Posted January 10, 2012 (edited) Is this it? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- * { margin:0; padding:0; } body { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; background-color:#999; } .secondary ul { list-style:none; margin:0; padding:0; /*width:20%;*/ /*float:left;*/ background-color:#CCC; display:inline; } .secondary { float: left; width:20%; background-color: yellow;/*#CCC;*/ } .secondary ul a { color:white; text-decoration:none; margin-left:1.22em; } .wrapper { width:58%; margin: 0 auto; background: teal; } .header { background-color:#333; height:110px; padding:5px; } .header h3 { color:white; text-shadow:3px 3px 3px #000; margin: 1em 0 0 2em; } .header p { color:white; font-size:12px; margin: 1em 0 0 2em; } .content { margin-left: 20%; margin-right: 20%; background-color:white; } .thirdcol { background: skyblue; float: right; width: 20%; } .footer { clear: both; background-color: green; } --> </style> </head> <body> <div class="wrapper"> <div class="header"> <h3>myBlog</h3> <p>Blog site</p> </div> <div class="secondary"> <ul class="nav"> <li><a href="#">blog</a></li> <li><a href="#">About</a></li> <li><a href="#">contact</a></li> <li><a href="#">download</a></li> <li><a href="#">blog</a></li> <li><a href="#">tagGroup</a></li> <li><a href="#">checkList</a></li> </ul> </div> <div class="thirdcol"><p>Third Column</p></div> <div class="content"> <div class="primary"> <!--<div class="primary">--> <h3>Lorem ipsum</h3> <p>Do your layouts deserve better than Lorem Ipsum? Apply as an art director and team up with the best copywriters at Jung von Matt: www.jvm.com/jobs/lipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget orci et erat vehicula interdum. Duis nec neque nec nisl volutpat facilisis eu vel felis. Nam ac tellus ac augue porttitor dictum. Curabitur ac justo lorem. Fusce suscipit faucibus est, quis tincidunt felis rhoncus ac. Quisque nisl risus, luctus eget adipiscing a, sollicitudin id nisi. Donec at sem lacus, rhoncus sollicitudin neque. Nunc risus lectus, mollis in bibendum eu, aliquam nec massa. Fusce eget orci diam, id luctus ligula. Proin elementum tempus ornare. Nulla sed velit imperdiet mauris vehicula ornare. Suspendisse imperdiet rutrum purus, in tincidunt diam molestie eu. Suspendisse nunc tellus, sodales sed feugiat at, ultricies at ante. Quisque quis ante nisi, in consectetur mauris. In hac habitasse platea dictumst. Nunc quis urna in velit pretium placerat. Donec placerat auctor vehicula. Vestibulum tristique aliquam faucibus. Etiam sagittis rhoncus ipsum nec dignissim. Phasellus pretium leo feugiat turpis condimentum rhoncus. Curabitur lacus eros, lacinia eget elementum vitae, lobortis non ligula. Donec convallis imperdiet mi, sit amet imperdiet dui venenatis sit amet. Donec sapien justo, interdum a pulvinar non, ullamcorper ut tortor. Mauris aliquam diam in mauris pharetra vel accumsan ligula imperdiet. Pellentesque semper, purus non sodales fermentum, erat mauris feugiat quam, nec mattis leo massa id ligula. </p> </div></div><!--</div>--> <div class="footer"><p>Footer</p></div> </div><!--end of .wreapper--> </body> </html> First code the float:left and float: right cols, then code the middle (.content) column with no width and no float but add side margins equal to the left and right cols like I have. Here are some variations of layouts, some with floats. http://www.wickham43.net/threecolumns.php I used item 9 in my code above (with % instead of px) or 17 but you could use three floated divs like item 5. Remember that margin, padding and borders add to the element's basic width so if you add those to the side divs the margins on the middle div will need to be increased. Edited January 10, 2012 by Wickham Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.