Geek Answers Handbook

Cannot set pixel width of div using css width attibute

I am trying to customize a div that contains 4 divs. I want to set the width of the container and some of the divs it contains to set the values, but they just see 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 is as follows:

 +--+----+----+------------------------+---+ | |date|text| |twi| +--+----+----+------------------------+---+

Can someone explain why the left divs are not set to the required widths?

+6
html css
source share
4 answers

I think this is because of the display: inline style try the following:

 <div style='width:100px;overflow:hidden;'> <div style='float:left;width:20px'></div> <div style='float:left;width:20px'></div> <div style='float:left;width:20px'></div> <div style='clear:both;'></div> </div>
+10
source share

The reason you cannot set the width is because you are setting display:inline; .

When elements are displayed in a row, they cannot indicate their sizes, because the size of an element is determined by the length of the text inside it.

By default, <div> tags are set to display:block; . This mode may have the specified height and width, but by default they are displayed below the previous block.

There are two ways for you:

  • Use display:block; and float:left; - this will change the blocks to floating elements, which means that subsequent elements will wrap around them. When used with other blocks, this effectively allows you to build them. However, using a float may have other unexpected side effects due to the wrapping effect that I described.

  • Use display:inline-block; - This is my preferred solution to this issue. inline-block is an intermediate house mode between block and inline . It allows you to treat the element as built-in for workflow purposes, but still behaves like a block inside, since it will always be straight, and you can specify the height and width, etc. This has a few quirks (especially for poor support in IE6), but overall for what you're trying to achieve, this is a much cleaner solution and has no weird float side effects.

Hope this helps.

+20
source share

Change your CSS as follows

 .container div { display: inline-block; }

When you set the inline container div, you also actively set all its child lines to a string, you can just use <span> s.

Here is an example.

http://jsfiddle.net/Kyle_Sevenoaks/ZwKDb/

+5
source share
 .container { float: left; width: 300px; position: relative; } .container div { float: left; }

Gotta do the trick. Remove the inline display on the inner divs and place any remaining divs. Then you can specify the width of the divs and any fields between them.

+1
source share

More articles:


All Articles