EvilZone
Programming and Scripting => Web Oriented Coding => : Code.Illusionist 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%.
-
<!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?:
<!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>
-
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.
-
If that should fail try making the divs emulating a table using display: table, display: table-column and so on.
-
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.
-
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 :)