homepage Welcome to WebmasterWorld Guest from 54.205.254.108
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Is it possible to center 2 floating divs?
12inch




msg:1183601
 10:17 am on Apr 29, 2003 (gmt 0)

Is it possible to center 2 floating divs that are nesting within one container div? For example:

body {
text-align: center;
}

div#container {
margin: 0px auto;
}

div#one {
float: left;
}

div#two {
float: left;
}

<div id="container">
<div id="one">text</div>
<div id="one">text</div>
</div>

If a remove the float: left, then the container is centered. But if I add the floating divs, the container floats to the left.

I want to position 2 DIV's next to each other centered IN a container DIV which is also centered. How can this be done?

Anand

 

papabaer




msg:1183602
 10:47 am on Apr 29, 2003 (gmt 0)

The only way to "see" how floats behave in contained situations is to experiment. You can read all about float behavior at the W3C CSS 2.1 [w3.org ] Do pay close attention to float behavior when it overlaps the borders of its container.

IE has a bug that will allow a float to increase the vertical dimension of a parent div that uses margin: auto;, so be careful when testing and do read the specs. Testing will help you to fully understand the behavior ramnifications however.

Also, try testing your code and varying the margin values. Experiment with percentages and em. See what behaviors result.

Best of luck!

Nick_W




msg:1183603
 11:15 am on Apr 29, 2003 (gmt 0)

Yep, testing is everything!

Seriously, I rarely can remember some of even the better known bugs untill I come to test my code and 'play' with new ideas. You find out so much more with experimentation and you'll very soon begin to get a 'feel' for how it all works...

Nick

Birdman




msg:1183604
 11:30 am on Apr 29, 2003 (gmt 0)

And a good way to really see what's happening is to have a temporary border on the elements in question.

12inch




msg:1183605
 12:33 pm on Apr 29, 2003 (gmt 0)

Yes, temporary borders are very handy. I use them all the time.

But, after testing a lot, I still haven't managed to center a floated DIV. I think it isn't possible. I have tried almost everything.

starsailor




msg:1183606
 2:53 pm on Apr 29, 2003 (gmt 0)

Does this help?

div#left {
width: 50%;
float: left;
}

div#right {
width: 50%;
float: right;
}

div#one {
float: right;
}

div#two {
float: left;
}

<div id="container">
<div id="left"><div id="one">text</div></div>
<div id="right"><div id="two">text</div></div>
</div>

papabaer




msg:1183607
 2:56 pm on Apr 29, 2003 (gmt 0)

Nick and Birdman are right. It is the 'feel' of CSS that is the desired goal of any serious user. When controlling margins, padding and position, CSS is ALL about relationships. Once you 'feel' the relationship in action, you will find yourself capable of exerting greater control.

CSS is not 'theory,' but a very powerful design tool with tremendous potential. And, the potential will only be realized if developers are willing to push beyond perceived limits.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved