Home/ Questions/Q 3332338
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T23:40:39+00:00

I’m trying to set up a div which contains 4 divs. I want to

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    i think it’s because of display:inline style
    try this:

    <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>
    • 0