Menu
I'm trying to set up a div which contains 4 divs. I want to set the width of the container and some of the contained divs to set values but they just seem to take the width of the content.
<html>
<head>
<style>
div {
border: 1px solid #888;
}
.container {
width: 300px;
position: relative;
}
.container div {
display: inline;
}
.div1 {
width: 20px;
overflow: hidden;
}
.div2 {
width: 80px;
overflow: hidden;
}
.div3 {
width: 160px;
overflow: hidden;
}
.div4 {
width: 20px;
overflow: hidden;
position: absolute;
top:0px;
right: 0px;
}
</style>
</head>
<body>
<div class="container">
<div class="div1"><img src="1x1.gif" width="1" height="1"/></div>
<div class="div2"><span>date</span></div>
<div class="div3"><span>text</span></div>
<div class="div4"><span>twistie</span></div>
</div>
</body>
</html>
The result looks like this:
+--+----+----+------------------------+---+
| |date|text| |twi|
+--+----+----+------------------------+---+
Can anyone explain why the left-hand divs are not being set to the required widths?
813
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.
What you could do is set your div to be position: absolute so your div is independent of the rest of the layout. Then say width: 100% to have it fill the screen width. Now just use margin-left: 30px (or whatever px you need) and you should be done.
The width CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing is set to border-box , it sets the width of the border area.
The reason you can't set the widths is because you are setting display:inline;.
When elements are displayed inline, they cannot have their dimensions specified because the size of the element is determined by the length of the text within it.
By default, <div> tags are set to display:block;. This mode can have its height and width specified, but defaults to being displayed below the preceding block.
There are two ways around this for you:
Use display:block; and float:left; -- This will change the blocks into floating elements, which means that subsequent elements will wrap around them. When used with other blocks, this effectively allows you to line them up. However using float can have other unexpected side-effects, due to the wrap-around effect I described.
Use display:inline-block; -- This is my preferred solution to this question. inline-block is a half-way house mode between block and inline. It allows an element to be treated as inline for the purposes of document flow, but still behave like a block internally, in that it will always be rectanguar and you are able to specify height and width, etc. It does have a few quirks (most notably poor support in IE6), but in general for what you're trying to achieve, it's a much cleaner solution and doesn't have the odd side-effects of float.
Hope that helps.
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
