Forum Moderators: not2easy
I was hoping someone might be able to help me with this CSS problem:
I've got 3 div's:
I'm trying to center the image block whilst the right menu block is floated to the right along side it. The description block should be under the image block, but flow around the menu block.
Currently, the image block is centered within the body tag, but it doesn't take into account the floating right menu div. So it is closer to that div that it should be.
Any idea how I might accomplish this?
Thank you so much for any help!
<html>
<head>
<title>test</title>
<style type="text/css" media="screen">
.image {
display:block;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
height: 250px;
width: 250px;
}
.floater {
border: 1px solid black;
float: right;
width: 150px;
height: 500px;
text-align: center;
}
.body {
}
body {
width: 700px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="floater">
2
</div>
<div class="image">
1
</div>
<div class="body">
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
</div>
</body>
</html>
1) I am assuming that you are designing in IE. You don't mention that the rendering is fine in Firefox and Opera. I strongly recommend that you design in Firefox and Opera and then correct for IE.
2) IE stretches the the body to wrap .floater which is set at height: 500px; - Firefox and Opera do not and .floater extends beyond the red border of <body>. Not mentioning this problem indicates design and testing issues.
3) Option one for the centering .image is the following edit:
.image {
/*margin-left: auto;
margin-right: auto;*/
margin-left: 225px;
4) Option two is to leave the markup as is, and add a conditional statement for IE. I put my conditional statements just before </head>. This way I never have to look for them.
</style>
<!--[if gte IE 7]>
<style type="text/css" media="all">
.image {
margin-left: 225px;
}
</style>
<! [end if]-->
</head>
5) The addition to body of height: 500px; will 'fix' Firefox and Opera with regard to the height problem of .floater. You must choose an option to get body to wrap around that container. You may well be offered other and better options for this.
6) Select and use a DTD. HTML 4.01 Strict is probably the best choice for most people. Not specifying your DTD is gambling. The selection makes a difference. I used:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Another choice might result in different rendering!
W3C - DTD [w3.org]
While the image box is centered (in FF), it is centered on the entire width of the body. I'm trying to get it centered on the width of the body, minus the floater box. It should be centered in the white space between the left edge of the body and the left edge of the floater box. Do you see it differently than that?
I am using the XHTML 1.1 DTD. I have a sample online, but according to the forum rules I should not post URLs.
Thanks again!
Because <body> was not extending around the height of .floater and there was no mention of that, I mistakenly assumed an IE testing environment.
(Removed from the natural flow of container order, floats are 'ignored' in many respects. It is often desired to expect both from them at the same time. LOL Treated in or out of the natural flow at our convenience. Is positioning .floater an option - and would it matter if locked into pixel width? Maybe, maybe not.)
1) Obviously, the easiest fix is px - This should work for most everything.
.image {
margin-left: 150px;
/*margin-right: auto;*/
2) Agree about being gun-shy with absolute positioning. That requires care for most people.
3) No px - bummer. Nevertheless, you've declared the width: and height: of .image in px, so do not understand the dynamic issue that will affect centering that box? <body> is defined as {width: 700px;} and .floater is defined as {width: 150px;} and .image is defined as {width: 250px;} - therefore, what will negatively impact positioning .image with {margin-left: 150px;} ?
that I won't know the pixel dimensions of.
For what containers will you not know the dimensions? The key dimensions seem to be locked and loaded, and committed to px already.
An alternative would be to rebuild the framework in percentages.
A very good chance that someone else will understand exactly the piece of the question that I am not understanding and suggest one or more solutions that will meet your dynamic needs. Sorry that I can't offer you more.
How funny that IE actually does what I want it to do in this case! Of course I'm probably violating CSS rules in the process :)
I think what I'm going to do is use px, but find a way to know what the px values are using JS. We let our customers determine various parameters such as the width and heights of the image box and floater box, so I don't necessarily know what they are going to be when the CSS files is created.
Thanks again for being a sounding board, you were very helpful!
e.g.:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
.image {
display:block;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
height: 250px;
width: 250px;
}
.floater {
border: 1px solid black;
float: right;
width: 150px;
height: 500px;
text-align: center;
}
.wrapper {
background-color: green;
overflow:hidden;
}
body {
width: 700px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="floater">
2
</div>
<div class="wrapper">
<div class="image">
1
</div>
<div class="body">
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
</div>
</div>
</body>
</html>
Try it with and without the overflow on the .wrapper to see what it does.
This does have as effect of preventing your content from wrapping back under the overflow (should you have more text)
If that's not what you seek:
A float pushes aside inline content, not blocks, so if we make your image inline and center it in a parent block, that should do the trick you seek just as well:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
.image {
display:inline-block;
border: 1px solid black;
height: 250px;
width: 250px;
}
.floater {
border: 1px solid black;
float: right;
width: 150px;
height: 500px;
text-align: center;
}
.imagewrapper {
background-color: green;
text-align: center;
}
body {
width: 700px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="floater">
2
</div>
<div class="imagewrapper">
<div class="image">
1
</div>
</div>
<div class="body">
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
</div>
</body>
</html>
Not: I changed the wrapper to only hold the "image".
Thanks so much! That second example is exactly what I was looking for! Awesome!
