Container div not Aligning properly
Question
I have a container div that is not aligning properly, nor can I keep divs inside a container div aligned right or left. It keeps on coming out of the main div or container.
Here's my simple homepage design but the divs are not indenting properly according to this layout:
#container{ background-color:white; width:100%; height:1200px; } #logo{ background-color:yellow; width:30%; height:100px; float:left; } #header{ background-color:green; width:100%; height:100px; float:left; } #navigation{ width:100%; height:40px; background-color:white; float:left; } #webname{ background-color:gray; width:70%; height:100px; float:right; } #mainclass{ width:100%; height:950px; float:left; } #asideright{ background-color:red; width:10%; height:950px; float:right; } #asideleft{ background-color:purple; width:20%; height:950px; float:left; } #selection{ background-color:yellow; width:70%; height:950px; float:center; } #footer{ background-color:green; width:100%; height:100px; float:;left; }
<html> <head> <title id="title">DUMMY </title> <link rel="icon" type="image/jpeg" href="dummy1.jpeg"> <link rel="stylesheet" type="text/css" href="dumm1.css"> </head> <body> <div id="container"> <div id="header"> <div id="logo"> </div> <div id="webname"> </div> </div> <div id="navigation"> </div> <div id="mainclass"> <div id="asideleft"> </div> <div id="selection"> </div> <div id="asideright"> </div> </div> <div id="footer"> </div> </div> </body> </html>
3 answers
solution1
0 2015-06-14 05:54:12
There is no such property as float: center; you have to change that property for #selection to float: left; .
Please refer to this tutorial.
solution2
0 2015-06-14 06:45:52
You can use this approach .
* { margin: 0; padding: 0; } .container { width: 1170px; } .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; background-color:red; } .row { margin-right: -15px; margin-left: -15px; } .inner_div { width: 25%; float:left; background-color:green; } .big_div { width: 75%; float:left; background-color:yellow; }
<html> <head> <title id="title">DUMMY </title> <link rel="icon" type="image/jpeg" href="dummy1.jpeg"> <link rel="stylesheet" type="text/css" href="dumm1.css"> </head> <body> <div class="container"> <div class="row"> <div class="inner_div" style="background-color:purple;"> i'm the inner container </div> <div class="inner_div" style="background-color:pink;"> i'm another one </div> <div class="inner_div" style="background-color:green;"> another one </div> <div class="inner_div" style="background-color:orange;"> woho! another one </div> <div class="big_div"> yipee! i'm another container </div> <div class="inner_div" style="background-color:red;"> yehaa! i'm another container </div> </div> <div id="navigation"> </div> <div id="mainclass"> <div id="asideleft"> </div> <div id="selection"> </div> <div id="asideright"> </div> </div> <div id="footer"> </div> </div> </body> </html>
solution3
0 ACCPTED 2015-06-14 06:51:07
this is your correct css
#container {
background-color: white;
width: 100%;
height: 1200px;
}
#logo {
background-color: yellow;
width: 30%;
height: 100px;
float: left;
}
#header {
background-color: green;
width: 100%;
height: 100px;
float: left;
}
#navigation {
width: 100%;
height: 40px;
background-color: white;
float: left;
}
#webname {
background-color: gray;
width: 70%;
height: 100px;
float: right;
}
#mainclass {
width: 100%;
height: 950px;
/*float: left;*/
}
#asideright {
background-color: red;
width: 10%;
height: 950px;
float: right;
}
#asideleft {
background-color: purple;
width: 20%;
height: 950px;
float: left;
}
#selection {
background-color: yellow;
width: 70%;
height: 950px;
float: left;
}
#footer {
background-color: green;
width: 100%;
height: 100px;
float: left;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap container not aligning properly
<div> in navbar not aligning properly
Properly aligning div elements
Div Element not aligning properly
ul not aligning properly in div
Items not aligning properly in CSS container
Aligning 3 div Boxes within a container
Html div id not aligning properly
Div are not properly aligning in JSP page
Div's not properly aligning horizontally
Related Tags