nielcleo Posted September 5, 2011 Share Posted September 5, 2011 Hi i have been using a two column using a float.here's my problem..im doing an layout and i want to happen like this..and here's the code i made for that.. <html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>SAMPLE BLOG POST</title><style>#main_content { background: #DADADA; width:990px; [b]height:1100px;[/b] border: 8px solid #FFF;}#content { width:590px; margin-left:30px; float:left; }#sidebar {background: #CC0000;width:330px;[b]height:1100px;[/b]float:right;}</style></head><body bgcolor="#333333"><div id="main_content"> <div id="content"> <h1>THIS IS A SAMPLE POST ONLY</h1> <img src="images/sample.jpg"><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <div id="seperator"></div> <h1>THIS IS A SAMPLE POST ONLY</h1> <img src="images/sample.jpg"><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <div id="seperator"></div></div> <div id="sidebar"><h1>SIDEBAR TITLE</h1> </div></div></body></html> when i remove the height on the main content and in the sidebar..it happens like this..(my purpose why i remove the height is to make the height expand when new post posted)anyone can give me a trick to maintain the background and the border of the main_content or the wrap when i remove the height.. Link to comment Share on other sites More sharing options...
Drycodez Posted September 5, 2011 Share Posted September 5, 2011 #main_content,#sidebar{min-height:1100px} Link to comment Share on other sites More sharing options...
nielcleo Posted September 5, 2011 Author Share Posted September 5, 2011 cheers thanks a lot it works Link to comment Share on other sites More sharing options...
nielcleo Posted September 5, 2011 Author Share Posted September 5, 2011 one last question sir..having a division like this <div id="main"><div id="sub"></div></div> right code #main #sub {} is there any effect if i will use only css code like this #sub Link to comment Share on other sites More sharing options...
Drycodez Posted September 5, 2011 Share Posted September 5, 2011 Doing: #main #sub{} Means that the style sheet will only be assigned to an element with an id="sub," >that is a child of another element with id="main". While: #sub{} will be assignd to any element with id="sub". EDIT: So, if you use the 1st example, and you try something like this: <div id="content"><div id="sub"></div></div> it ll not work because the style will only be assigned to any element with 'sub' id, that is a child of another element with 'main' id. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 5, 2011 Share Posted September 5, 2011 Just to point out a problem in using #main_content,#sidebar{min-height:1100px} if the content exceeds height of 1100px it will increase, but the sidebar will remain the same height, which will result in light grey background showing below sidebar.better option is to remove background color of side bar, and place repeating background image of same width along right edge in main content. <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>SAMPLE BLOG POST</title><style>body {background-color:#333333;}#main_content {width:990px;border: 8px solid #FFF;background:#DADADA url(red-bg.png) repeat-y right top;overflow:hidden;}#content {width:590px;margin-left:30px;float:left;}#sidebar {width:330px;float:right;}</style></head><body><div id="main_content"><div id="content"><h1>THIS IS A SAMPLE POST ONLY</h1><img src="images/sample.jpg"><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<div id="seperator"></div><h1>THIS IS A SAMPLE POST ONLY</h1><img src="images/sample.jpg"><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<div id="seperator"></div></div><div id="sidebar"><h1>SIDEBAR TITLE</h1></div></div></body></html> Link to comment Share on other sites More sharing options...
Drycodez Posted September 5, 2011 Share Posted September 5, 2011 Just to point out a problem in using #main_content,#sidebar{min-height:1100px} if the content exceeds height of 1100px it will increase, but the sidebar will remain the same height, which will result in light grey background showing below sidebar... yeah, thats a good idea! But one more thing to note is that: when the visitor(s) turn off 'view image' in the browser, the background will still be gray. The best approach is to use <table> Link to comment Share on other sites More sharing options...
mgason Posted September 5, 2011 Share Posted September 5, 2011 one last question sir..having a division like this<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>2 Columns</title><style type="text/css">body{ background-color:#333333; margin:0;}h1{ font-size:1.5em;}#outer-container { width: 980px; margin:0 auto; padding:10px; background-color:#fff;}#inner-container { width: 960px; background-color:#f00; padding:10px; background:#fff url('bg.gif') repeat-y;}#main { float:left; width:590px;}#sidebar { float:right; width:330px;}.clear{ clear:both; }</style></head><body> <div id = "outer-container"> <div id = "inner-container"> <div id = "main"> Lorem Ipsum a big slab of content goes here </div><!--end main--> <div id = "sidebar"> <h1>The standard Lorem Ipsum passage, used since the 1500s</h1> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ulla </div><!--end sidebar--> <div class="clear" </div><!--end inner-container--> </div><!--end outer-container--></body></html> Link to comment Share on other sites More sharing options...
Drycodez Posted September 5, 2011 Share Posted September 5, 2011 ...remember #main #sub points to sub just like #sub...It points to any element with #sub ID, that is a child of any element with #main ID and not just any div element with #sub ID! Link to comment Share on other sites More sharing options...
Drycodez Posted September 5, 2011 Share Posted September 5, 2011 Istead of using a bg image that will dissapear after the visitor(s) turn off the browser 'view image,' a beta option is to make #main_content{} have a background-color of red, then make #content{} have the lite gray, and remove #sidebar{} bg-color and the #main_content{} image. EDIT:NB: The best approach is still through the use of <TABLE> element. Link to comment Share on other sites More sharing options...
mgason Posted September 5, 2011 Share Posted September 5, 2011 Hi Samuel,<quote>It points to any element with #sub ID, that is a child of any element with #main ID and not just any div element with #sub ID!"</quote>true my bad I meant in the context of his code it would be the same div. I was just wanting to point out he needs a comma when referring to multiple elements.They could turn off image, and your method would work, but again you would have the matching column height problem unless you use min-height.Personally a really high min-height without content would piss me off as a user.the background image is a fairly common and often recommended method, to each his own, many ways to skin a cat!You could of course have the colors in there as well as the imageThis woud give you a 2 column layout if images are off, admittedly with a short red column. Certainly I think if a user visits images off it is a bit much to be criticizing the minor aesthetics of a website. It certainly would function perfectly without the background.I got the method from Ethan Marcotte great new book, "Responsive Web Design", a great little read by the way http://www.abookapart.com/products/responsive-web-designIt also explains how to make the background trick work on a flexible layout that adapts to everything from an iphone to a big screen. #outer-container { width: 980px; margin:0 auto; padding:10px; background-color:#fff;}#inner-container { width: 960px; background-color:#f00; padding:0 0 0 10px; background:#dadada url('bg.gif') repeat-y;}#main { float:left; width:590px; padding:10px;}#sidebar { float:right; width:330px; padding:10px; background-color:#cc0000;} Link to comment Share on other sites More sharing options...
nielcleo Posted September 5, 2011 Author Share Posted September 5, 2011 thanks guys for the help..it's fine not to have a red background on the sidebar.. but not to break the main content background and border when new article added..and what samuel said that if the user using a phone which the viewing image is off.. thats why i preserve using background color instead of background image..just now i also encounter breaking the background when the min-height exceed to the limit...and if i use mgason made.. im having trouble on putting a 3 column footer...i think i would go to the last option.. using table..i often use table haha..it is fine to use also a table including the 3 column footer? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 5, 2011 Share Posted September 5, 2011 OK.... If you don't want to use a image, what if you use a position absolute element instead. <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>SAMPLE BLOG POST</title><style>body{background-color:#333333;}p{margin:1em 0px;}#main_content {width:990px;border: 8px solid #FFF;background-color:#DADADA;/*background:#DADADA url(red-bg.png) repeat-y right top;*/overflow:hidden;position: relative;}#content {width:590px;margin-left:30px;float:left;}#sidebar {width:330px;float:right;position:relative;}#sidebar_bg {position:absolute; right:0; top:0; bottom:0; width:330px; background-color:#cc0000; z-index: 0;}</style></head><body><div id="main_content"><div id="sidebar_bg"></div><div id="content"><h1>THIS IS A SAMPLE POST ONLY</h1><img src="images/sample.jpg"><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<div class="seperator"></div><h1>THIS IS A SAMPLE POST ONLY</h1><img src="images/sample.jpg"><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<div class="seperator"></div></div><div id="sidebar"><h1>SIDEBAR TITLE</h1><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></div></body></html> Link to comment Share on other sites More sharing options...
nielcleo Posted September 6, 2011 Author Share Posted September 6, 2011 thanks dsonesuk.. it's working.. now im having trouble on 3 column footer widget.. the right side did not align with the left and center..here's the code: <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>SAMPLE BLOG POST</title><style>body{background-color:#333333;}p{margin:1em 0px;}#main_content {width:990px;border: 8px solid #FFF;background-color:#DADADA;overflow:hidden;position: relative;margin-left:auto;margin-right:auto;}#content {width:590px;margin-left:20px;float:left;}#sidebar {width:320px;margin-right:20px;float:right;position:relative;}#footer-widgets {background: #EEE;width:1006px;height:320px;margin-left:auto;margin-right:auto;}#footer-widgets #left {float:left;clear:left;width:30%;margin-left:20px;} #footer-widgets #center {float:left;width:30%;} #footer-widgets #right {float:right;width:30%px;margin-right:10px;}</style></head><body><div id="main_content"><div id="content"><h1>THIS IS A SAMPLE POST ONLY</h1><img src="images/sample.jpg"><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<div class="seperator"></div><h1>THIS IS A SAMPLE POST ONLY</h1><img src="images/sample.jpg"><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<div class="seperator"></div><br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div><div id="sidebar"><h1>SIDEBAR TITLE</h1><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></div><div id="footer-widgets"> <div id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> <div id="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> <div id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> </div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted September 6, 2011 Share Posted September 6, 2011 #footer-widgets #right {float:right;width:30%; /*ERROR width:30%px*/margin-right:10px;}for footer-widgets element to surround its child floated div elements, and adjust to the highest height of any of these elements, you would have to use overflow:hidden.#footer-widgets { background: #EEE; /* height: 320px; removed by dsonesuk*/margin-left: auto; margin-right: auto; overflow: hidden; /*added by dsonesuk */width: 1006px;} Link to comment Share on other sites More sharing options...
nielcleo Posted September 6, 2011 Author Share Posted September 6, 2011 #footer-widgets #right {float:right;width:30%; /*ERROR width:30%px*/margin-right:10px;}for footer-widgets element to surround its child floated div elements, and adjust to the highest height of any of these elements, you would have to use overflow:hidden.#footer-widgets { background: #EEE; /* height: 320px; removed by dsonesuk*/margin-left: auto; margin-right: auto; overflow: hidden; /*added by dsonesuk */width: 1006px;}thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.