I have a wrapper div and it would contain 2 inner divs. I would like to center the wrapper div without giving it a width. Because the widths of the inner divs would be dynamic (code generated), giving a fixed width to the wrapper div becomes hard. I tried something like this, but the wrapper div (because of the lack of width) becomes as wide as the browser window.
Is there some way I can do this? Thanks for the help.
I’m a little confused as to what you are trying to do here and may have got the wrong end of the stick as usual. Of course a p element without width will stretch to the full 100% should the text stretch that far as that is what you would expect for fluid content. This would happen in a single widthless float anyway and doesn’t seem related to the task in hand so I assume you have other criteria here that you are trying to solve
It looks as though you were trying to make the text wrap at the width of a fixed element above it (which we already covered in a quiz) and is the method I used in my caption example which works everywhere apart form ie6 and 7 that need a helping hand with an expression.
Is that what you meant or were there some other criteria that I missed when skimming through?
(IE8 will not keep the page centered with the expanding test anchor but that is only with the test code. If it was a 500px or 700px image then it will center on page load)
IE8 can be fixed by using display:inline-block instead of float (as I mentioned above) and now works fine on hover.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
html, body {
text-align:center;
}
.wrap {
padding:10px;
border: 1px solid gray;
display:-moz-inline-box;
display:inline-block;
vertical-align:top;
text-align:left;
}
* html .wrap {
display:inline
}
*+html .wrap {
display:inline
}
.col-one {
float:left;
border: 1px solid gray;
/*width: 500px;*/
height: 600px;
}
.col-two {
float:left;
width: 100px;
height: 600px;
margin-left: 20px;
border: 1px solid gray;
}
/*===Test Expander===*/
a.test {
display:inline-block;
width:500px;
height:50px;
line-height:50px;
margin:0 10px;
background:#CDF;
}
a.test:hover {
width:700px;
}
</style>
<!--[if gt IE 7]>
<style type="text/css">
.col-one,.col-two{
display:inline-block;
float:none;
vertical-align:top;
}
</style>
<![endif]-->
</head>
<body>
<div class="wrap">
<div class="col-one"> <a class="test" href="#">Hover here to expand width to 700px</a>
<!-- <p>Lorem ipsum dolor sit amet consectetuer est tempus et vel tempor. Vel neque nisl
ipsum Fusce aliquam lacinia id velit quis ac. Est malesuada vitae at hendrerit Proin
morbi mauris nec egestas netus.</p> -->
</div>
<div class="col-two"> </div>
</div>
</body>
</html>
I did find a partial solution for the float method by changing something on the parent on hover but it was hit and miss and only worked if a certain part of the anchor was moused over which was very weird.
The example I posted will work for whatever the inner elements widths are and indeed should work even if they are widthless but held open by dynamic content such as images.
I remember going through all these scenarios when I was testing with dynamic widths on the inner divs. If you use min-width on the inner columns then a “p” tag will not blow it apart. (of course min-width excludes IE6)
If you don’t set a width or min-width then all it takes is a long string of text in a “p” tag to make the shrinkwrap float expand to the width of the viewport as seen in this code below when you uncomment the p tag.
I am using an expanding anchor to simulate different image widths, break the p tag loose and it fills the available space of the viewport.
(IE8 will not keep the page centered with the expanding test anchor but that is only with the test code. If it was a 500px or 700px image then it will center on page load)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
body{text-align:center;}
.wrap {
padding:10px;
border: 1px solid gray;
display:-moz-inline-box;
display:inline-block;
vertical-align:top;
text-align:left;
}
* html .wrap{display:inline}
*+html .wrap{display:inline}
.col-one {
float:left;
border: 1px solid gray;
[COLOR=Red]/*width: 500px;*/[/COLOR]
height: 600px;
}
.col-two {
float:left;
width: 100px;
height: 600px;
margin-left: 20px;
border: 1px solid gray;
}
/*===Test Expander===*/
a.test {
display:block;
[COLOR=Blue]width:500px;[/COLOR]
height:50px;
line-height:50px;
margin:0 10px;
background:#CDF;
}
a.test:hover{
[COLOR=Blue]width:700px;[/COLOR]
background:#0FF;
}
</style>
</head>
<body>
<div class="wrap">
<div class="col-one">
<a class="test" href="#">Hover here to expand width to 700px</a>
[B][COLOR=Green]<!--[/COLOR][/B] <p>Lorem ipsum dolor sit amet consectetuer est tempus et vel tempor. Vel neque nisl
ipsum Fusce aliquam lacinia id velit quis ac. Est malesuada vitae at hendrerit Proin
morbi mauris nec egestas netus.</p>[B][COLOR=Green] -->[/COLOR][/B]
</div>
<div class="col-two">
</div>
</div>
</body>
</html>
I assumed the OP meant that the widths of the inner elements will be different from that shown but should still work no matter what width was used.
The example I posted will work for whatever the inner elements widths are and indeed should work even if they are widthless but held open by dynamic content such as images. The outer container is widthless and will shrink to wrap whatever the inner elements are and will also remain centred because it is an inline-block element and will be centred with the text-align:center I applied to the body. Obviously you can’t have more than one line of fluid content like text in a widthless float because it will stretch automatically to 100% when pressed and a width would need to be set for at least one of the columns to allow two columns to always be side by side.
Of course rather than using any floats at all we could use the same display:inline-block for the inner elements but the same reasoning will hold for them as for the floats as they are also shrink to fit elements.
yea that would make a difference if the the code generated is of random different widths corresponding to the content or the code is generated in container Divs of a specific width
Because the widths of the inner divs would be dynamic (code generated), giving a fixed width to the wrapper div becomes hard.
I may be missing something here, I thought you were saying that the widths of the inner divs would be determined by the content. Or are you saying that various fixed widths will be generated.
Hi Paul,
Yes I knew that you were aware of the fluid effects of a widthless p tag.
As you noted, what I was trying to do is no longer related to the scope of the thread since the OP is using scripted fixed widths on the columns.
I’m a little confused as to what you are trying to do here
This was a request from someone I had a while back. What I was trying to achieve was a x-browser version of this. The expanding anchor is just being used to simulate a wide image being placed in the left column.
The purpose was similar to the OP’s in that the main wrapper would stay centered while allowing for dynamic widths of the columns. That is not a problem as we know. The left column width was to be determined by the content. It would have a min-width so it would allow for expansion if an oversized image was placed in there.
I did not have any problems with a fluid width p tag in that example because the right column was shifted out of the inner wrapping div with a negative margin. Of course there was a 300px right margin on the inner wrap div as well.
IE8 can be fixed by using display:inline-block instead of float (as I mentioned above) and now works fine on hover.
I just found some more strange results in IE8 using the caption method that you noted above.
If I set the p tag to display:table with 1px width and then nest the anchor in it the results are not the same as the anchor sitting by itself.
As I mentioned the anchor just represents an oversized image. IE8 loads it fine on the initial page load if the anchor width is not changed on hover. That is I can set the width whatever I choose and the page will center, It just looks like some sort of :hover bug
Have a look at this in FF vs. IE8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
html, body {
text-align:center;
}
.wrap {
padding:10px;
border: 1px solid gray;
display:-moz-inline-box;
display:inline-block;
vertical-align:top;
text-align:left;
}
* html .wrap {
display:inline
}
*+html .wrap {
display:inline
}
.col-one {
float:left;
/*min-width:500px;*/
height: 600px;
border: 1px solid gray;
}
[B].col-one p{
display:table;
width:1px;
}[/B]
.col-two {
float:left;
width: 100px;
height: 600px;
margin-left: 20px;
border: 1px solid gray;
}
/*===Test Expander===*/
a.test {
display:inline-block;
width:500px;
height:50px;
line-height:50px;
background:#CDF;
}
a.test:hover {
width:700px;
}
</style>
<!--[if gt IE 7]>
<style type="text/css">
.col-one,.col-two{
display:inline-block;
float:none;
vertical-align:top;
}
</style>
<![endif]-->
</head>
<body>
<div class="wrap">
<div class="col-one">
[B]<a class="test" href="#">[/B]Hover here to expand width to 700px[B]</a>[/B]
[B]<p><a class="test" href="#">[/B]Hover here to expand width to 700px[B]</a><br />[/B]
Lorem ipsum dolor sit amet consectetuer est tempus et vel tempor. Vel neque nisl
ipsum Fusce aliquam lacinia id velit quis ac. Est malesuada vitae at hendrerit Proin
morbi mauris nec egestas netus.[B]</p>[/B]
</div>
<div class="col-two"> </div>
</div>
</body>
</html>
My apologies if I did not make this clear. All the inner divs would have a width, however this width would vary. The code is database driven and would generate inner divs with various widths.
The wrapper div needs be as wide as the combined widths of the inner divs and stay centered.
