thundercade64 Posted March 25, 2006 Share Posted March 25, 2006 I'm trying to position some div elements (sub1, sub2) inside of a container div. The container div with automatically resize to fit the subs in it, until I give sub1 "float:left". At that point, the container div no longer auto sizes to fit sub1 into it. Along with that, if sub1 is floated left, the left side of sub2 overlaps the top of sub1.So, I have two questions:1. How can I float a div element and still have the container auto size around it?2. As for sub2 overlapping with sub1, I realize I can float sub2 left to get rid of the overlapping, but then it no longer auto sizes to fill up the remaining horizontal space in the container. So, how can I have it not overlap, but still take up the remaining space?The code I've put below does not yet have the "float:left" attributes put into sub1 or sub2 divs yet. If you don't quite know what I mean, take a look at my code, then put float:left into sub1, see what happens, then into sub2...(also, I tried it without giving sub1 specific width or height, and that doesn't seem to help)I've been trying everything I can think of. <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>demo</title><style type="text/css">.container { padding:10px; border:1px solid black; }.sub1 { width:100px; height:200px; border:1px solid lime; }.sub2 { border:1px solid purple; }</style></head><body><div class="container"> <div class="sub1"> sub1 </div> <div class="sub2"> sub2 </div></div></div> Link to comment Share on other sites More sharing options...
carinemaz Posted March 25, 2006 Share Posted March 25, 2006 Add the property Clear: both;to your .sub2that should solve your problem... Link to comment Share on other sites More sharing options...
carinemaz Posted March 25, 2006 Share Posted March 25, 2006 Add the property Clear: both;to your .sub2that should solve your problem...<{POST_SNAPBACK}> oh and if your trying to put those 2 divs one next to an other.... you need to creat a 3 div and give it the property "clear: both" to maintain the height of your div container....Hope that helps Link to comment Share on other sites More sharing options...
thundercade64 Posted March 25, 2006 Author Share Posted March 25, 2006 awesome, that keeps the height auto wrapping...although I still can't figure out my original second question. If I float sub2 left, it overlaps sub1, unless I float it left as well. However, it then will not auto extend to fill up the remaining horizontal space in the container. Is there a way to do this? Maybe with the width attribute or something? Link to comment Share on other sites More sharing options...
carinemaz Posted March 25, 2006 Share Posted March 25, 2006 Not sure what you're trying to do...But if you want to create a 2 columb layout page, here is an easy way to do it: <style type="text/css">.container {width: 800px; padding:10px; border:1px solid black; }.sub1 { width:100px; height:200px; border:1px solid lime; float: left; }.sub2 { width: 690px; border:1px solid purple; float: right; }#footer {clear: both;}</style></head><body><div class="container"><div class="sub1"> <h1>sub1</h1></div><div class="sub2"> <h1>sub2</h1></div><div id="footer"></div></div></body> You should asign a width to your main container (you may run into problems with IE if you don't), and I added a width to your sub2, and I used float: right instead of left...And added that third div that I mentioned earlier to maintain your container's height.Sorry if that's not what you want to do... Link to comment Share on other sites More sharing options...
thundercade64 Posted March 27, 2006 Author Share Posted March 27, 2006 ok, giving it a specific width is ok...but what if I want to have the sub2 be fluid when the browser is resized (down to a minimum width). If I take away the set width value to do this (I have to right?), and the content of sub2 is long enough, it blocks down below the sub1 as if it wasn't floated...but only if FF, not IE.Any thoughts? Link to comment Share on other sites More sharing options...
carinemaz Posted March 30, 2006 Share Posted March 30, 2006 ok, giving it a specific width is ok...but what if I want to have the sub2 be fluid when the browser is resized (down to a minimum width). If I take away the set width value to do this (I have to right?), and the content of sub2 is long enough, it blocks down below the sub1 as if it wasn't floated...but only if FF, not IE.Any thoughts?<{POST_SNAPBACK}> You may want to check this website.... tutorial 8http://css.maxdesign.com.au/floatutorial/index.htmHope that helps Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now