I have a div, within the div is a name in an <h4> tag (it's semantically correct with the layout) and a div with some values describing that <h4> value. I want the nested div to be on the right side, and the only way I can get this to work is a fixed-width container and float: right;. As you can guess, the object breaks when the value of the <h4> causes the nested div move below instead of to the right. I've tried min-width, but it ends up stretching to the maximum size of the div containing the container div. I want it to be such that when the h4 is too big the entire div just stretches.
views:
152answers:
4
A:
If you want your nested <div> to move down when the <h4> is too large, apply clear: right to the nested <div>.
MvanGeest
2010-05-27 21:51:14
I want the div to stretch, and have the nested div stay on the same line.
DavidR
2010-05-27 22:18:54
A:
Give the parent div position: relative and the child div position:absolute with a small top and right value based on the margin you desire from the top-right corner of the parent div. In order to get the expanding width behaving correctly, you should be able to set right padding on the parent div equivalent to the width of the child div so that the h4 doesn't overlap the child when it is too long, yet expands the parent div properly.
div { padding-right:200px; position: relative; }
div div { position: absolute; top:0; right: 0; width:200px; }
mVChr
2010-05-27 23:24:20
A:
This work's like a charme:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="pt" dir="ltr">
<head>
<title>Organize the Content of a DIV</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
div {width:80%;}
div h4 {float:left;max-width:40%;}
div div {float:right;max-width:40%;}
</style>
</head>
<body>
<div>
<h4>This is working?</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</body>
</html>
Let's look at the CSS:
{width:80%;} Dynamic width for the container
h4 {float:left;max-width:40%;} Set's the at the left of the screen, and doesn't allow it to grow more that 40% of the container's width
div {float:right;max-width:40%;} Set's the nested to be on the right of the screen,and doesn't allow it to grow more that 40% of the container's width
This is a simple way to prevent the two nested element's from breaking... The 40% of max-width is just an example, could be 60~40 :)
Hope that helps U!
Zuul
2010-05-28 01:03:11