I need center of the two div(defined float div) in the outside container. But i dont want to define the width in the outside container. I need flexible width depend on the inside container divs.
But i dont want to define the width in the outside container. I need flexible width depend on the inside container divs.
Hi,
Just so you will know, that margin:auto and width:auto; on your inner wrapping div does not do any good unless a width is defined. You might as well remove both of them if you can’t set a width.
Change your floats to inline-block if you want to center the two 100px divs. When you set this code up properly in a css file you will need to give IE6/7 an inline-block trigger by resetting the two innermost divs to display:inline; in another ruleset.
display:inline-block attributes is not working in Firefox 2.0.2. I have given the sample mockup in this thread. Also i have given my code is below, Please check and tell me your idea. In the middle of the button is flexible width. I have crop two images for left side curve and right side curve because of thats button is flexible.
If you want to center widthless blocks then you only have one of two choices. The method that I have already linked to with inline-block or Paul’s centered widthless float method.
I’m not sure why you are not doing this with a ul and list items as it appears to be a navbar you are building. I’ll go along with the code your using since the basic set up is similar anyways.
It will take a while for the images to be approved but I think this code should work for you in FF2.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Centered widthless blocks</title>
<style type="text/css">
#wrap{
width:500px;
height:100px;
border:1px solid red;
background:[COLOR=Blue]#808080;[/COLOR]
}
[B]#inner[/B]{
height:30px;
margin-top:20px;
border:1px solid green;
background:yellow;
[B]text-align:center;[/B] [COLOR=Blue]/*center the inline-blocks*/[/COLOR]
}
.hbutlft{
/*=== ????? ====*/
}
[B].hbutton[/B]{
[COLOR=Red]/*float:left;*/[/COLOR]
[COLOR=Blue]display: -moz-inline-box;/* for FF2 (inline-box must be used for shrink wrapping)*/
display:inline-block;/* for modern browsers */[/COLOR]
height:20px;
margin:0;
padding-left:5px;
background:lime url(left_btn.gif) no-repeat top left;
}
[COLOR=Blue]* html .hbutton {display:inline; margin:0 2px;}/* inline-block trigger for IE6 */
*+html .hbutton {display:inline; margin:0 2px;}/* inline-block trigger for IE7 */[/COLOR]
[B].hbutton h2[/B]{
[COLOR=Blue]float:left;
height:20px;[/COLOR]
margin:0;
padding:0 5px 0 0;
background:red url(right_btn.gif) no-repeat top right;
}
[B].hbutton a[/B]{
[COLOR=Blue]float:left;[/COLOR]
[COLOR=Blue]height:18px;[/COLOR]
line-height:18px;
font-size:11px;
[COLOR=Blue]border-top:1px[/COLOR] solid #D8DFEA;
[COLOR=Blue]border-bottom:1px [/COLOR]solid #D8DFEA;
background:#F2F4F7;
}
</style>
</head>
<body>
<div id="wrap">
<div id="inner">
<div class="hbutlft">
<div class="hbutton"><h2><a href="#">Button 1</a></h2></div>
<div class="hbutton"><h2><a href="#">Button 2</a></h2></div>
</div>
</div>
</div>
</body>
</html>
Just to complete Rayzurs’ example: display: -moz-inline-box; needs to come before display:inline-block; otherwise modern browsers will not ignore it, so don’t alter the sequence
No Luki, FF3 is a modern browser, but only FF3+ needs display:-moz-inline-box before display:inline-block because FF3 will read the latter display:inline-block (which it should use) but other browsers won’t even read -moz-inline-box because it has the -moz extention :).
