Author Topic: Align 4 divs side by side (Read 626 times)

Code.Illusionist · « **on:** December 03, 2014, 06:41:40 pm »

Hey there. How can I align 4 divs inside one div with width 100% of full page. I set their sizes to 20%, 40%, 20%,20% . Also, their height is 100% . But that works when I set html and body height to 100%.

ande · « **Reply #1 on:** December 03, 2014, 06:59:07 pm »

Code: (html) [Select]

<!doctype html>
<html lang="en">
<head>

<style>
body {
width: 100%;
height: 100%;
}
#outerDiv {
width: 100%;
}
#div1 {
float: left;
width: 20%;
height: 10px;
background-color: red;
}
#div2 {
float: left;
width: 40%;
height: 10px;
background-color: blue;
}
#div3 {
float: left;
width: 20%;
height: 10px;
background-color: yellow;
}
#div4 {
float: left;
width: 20%;
height: 10px;
background-color: black;
}
</style>

</head>
<body>

<div id="outerDiv">

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

</div>

</body>
</html>

Is one way to do it?

EDIT: Just realized you wanted to cover the whole page width and height?:

Code: (html) [Select]

<!doctype html>
<html lang="en">
<head>

<style>
body {
width: 100%;
height: 100%;
}
#outerDiv {
position: absolute;
width: 100%;
height: 100%;
}
#div1 {
float: left;
width: 20%;
height: 100%;
background-color: red;
}
#div2 {
float: left;
position: relative;
width: 40%;
height: 100%;
background-color: blue;
}
#div3 {
float: left;
width: 20%;
height: 100%;
background-color: yellow;
}
#div4 {
float: left;
width: 20%;
height: 100%;
background-color: black;
}
</style>

</head>
<body>

<div id="outerDiv">

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

</div>

</body>
</html>

Code.Illusionist · « **Reply #2 on:** December 03, 2014, 07:25:50 pm »

Alright, I think that the problem was with body {width:100%} . I forgot to use that. But still need to test this out on other PC. Because everything about coding is there. It works here, yes, but there I have other content on page and that might cause not to be aligned. But will check for sure. I used all as you did, float and stuff. But only missed width of body . Oh yes, thanks.

ande · « **Reply #3 on:** December 03, 2014, 07:29:02 pm »

If that should fail try making the divs emulating a table using display: table, display: table-column and so on.

Code.Illusionist · « **Reply #4 on:** December 03, 2014, 07:35:46 pm »

The first method didn't worked out for some unknown reason, but second one did with small difference. Insted of table-column , I used table-cell. I guess that was what you mean.

ande · « **Reply #5 on:** December 03, 2014, 07:54:52 pm »

Quote from: Code.Illusionist on December 03, 2014, 07:35:46 pm

The first method didn't worked out for some unknown reason, but second one did with small difference. Insted of table-column , I used table-cell. I guess that was what you mean.

Yep! That's the one

EvilZone

News:

Author Topic: Align 4 divs side by side (Read 626 times)

Code.Illusionist

Align 4 divs side by side

ande

Re: Align 4 divs side by side

Code.Illusionist

Re: Align 4 divs side by side

ande

Re: Align 4 divs side by side

Code.Illusionist

Re: Align 4 divs side by side

ande

Re: Align 4 divs side by side