Home/ Questions/Q 8267997
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T05:43:41+00:00

I’m trying to create a wrapper with in it 4 divs next to each

  • 0

I’m trying to create a wrapper with in it 4 divs next to each other (two next to each other and below them the remaining two). However the problem is, is that only the fourth one is showing itself. I’ve tried setting the overflow: hidden, toy with the display property and also tried to use float:left and float:right. Yet so far no luck.

This is the css I’m using:

html, body{
width: 100%;
height: 100%;
}

#wrapper{
width: 60%;
height: 60%;
top: 20%;
left: 20%;
position: relative;
overflow: hidden;
border: 1px solid #000;
}

#one{
background-color: red;
width: 50%;
position: absolute;
height: 50%;
}

#two{
background-color: green;
width: 50%;
position: absolute;
height: 50%;
}

#three{
background-color:blue;
width: 50%;
position: absolute;
height: 50%;
}

#four{
background-color: yellow;
width: 50%;
position: absolute;
height: 50%;
}

and this is the html code that goes with it:

<html><head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head><body>
<div id="wrapper">
    <div id="one">a</div>
    <div id="two">b</div>
    <div id="three">c</div>
    <div id="four">d</div>
</div>
</body></html>

Can anyone figure out why the yellow (four) div is the only one showing itself, even if I let it float right and others left? (Besides I’m also wondering why there are scrollbars appearing because of the width: 100% and height: 100% in the html,body part.)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    That’s because you set the position to absolute on all four of your divs. You then have to position them using top, bottom, right, or left. When you position an element absolutely, it gets taken out of the flow of the document.

    jsFiddle example

    CSS

    #one{
background-color: red;
width: 50%;
position: absolute;
height: 50%;
}

#two{
background-color: green;
width: 50%;
position: absolute;
height: 50%;
right:0;
top:0;
}

#three{
background-color:blue;
width: 50%;
position: absolute;
height: 50%;
left:0;
bottom:0;
}

#four{
background-color: yellow;
width: 50%;
bottom:0;
right:0%;
position: absolute;
height: 50%;
}

    A second option is to remove the absolute positioning, and float them all left.

    jsFiddle example

    CSS:

    #one,#two,#three,#four {
float:left;
}
​
    • 0