How to center page with float:left element contained

Forum Moderators: not2easy

Message Too Old, No Replies

How to center page with float:left element contained

BillGatesSenior

8:53 pm on Nov 18, 2008 (gmt 0)

OR....simply align divs in a row without float:left

I have two divs within the header.

The whole page is 100% width and the header is 100%.

All I want to do is align the two divs side by side, but aligned to the center.

Has any one got any advice on how I should be doing this? I have searched google, I can't find a viable solution.

Thanks.

swa66

9:36 pm on Nov 18, 2008 (gmt 0)

Sounds like it's easy enough if you use display:inline-block on the children blocks. As they then behave like "text" you can use text alignment on them from the parent.

Note that inline block needs some extra help for old IE:
[webmasterworld.com...]

dompuiu

1:08 pm on Nov 19, 2008 (gmt 0)

Hi,

If the two divs have fixed width you could try something 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" xml:lang="en" lang="en"> 
<head> 
 <title>Test</title> 
 <style type="text/css"> 
 .container { 
  position: relative; 
 }  .div1 { 
  width: 300px;  
  background: red;  
   
  position: absolute;  
  top: 0; 
  left: 50%; 
  margin-left: -250px; 
 } 
 .div2 { 
  width: 200px;  
  background: yellow;  
   
  position: absolute;  
  top: 0; 
  left: 50%;  
  margin-right: -250px; 
 } 
 </style> 
</head> 
<body> 
 <div class="container"> 
 <div class="div1">div1</div> 
 <div class="div2">div2</div> 
 </div> 
</body> 
</html>

wrgvt

3:31 pm on Nov 20, 2008 (gmt 0)

Couldn't you do something like:

</div>

This width of the inner divs could be anything you want.