Hello all,
I would like to align horizontally three divs. Also i need them to be responsive as we resize (horizontally) the window and stay at the center of the screen. I used float but they stay at the left of the screen and i can't center them.
Here is the result: http://alphasite.eu/project1/ In the bottom of the page you can see my three divs which are not alligned properly in the same line. Their ids in html are left_colon, main_content and right_colon.
here is my html:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>html_5_Basic</title>
<link rel="icon" href="styles/images/favicon.ico">
<link rel="stylesheet" href="styles/main.css" type="text/css" />
</head>
<body>
<div id="main_container">
<div id="top_container">
<div id="header">header</div>
<div id="slider">slider</div>
</div><!--top container-->
<div id="main_menu">main menu</div>
<div id="bottom_container">
<div id="left_colon">left colon</div>
<div id="main_content">
Ιν μενανδρι πρινσιπες λιβεραφισε ηας. Ναμ κυιδαμ σωνσεπθαμ ιδ. Φιδιτ ρεγιονε φολυπθατιβυς υσυ νε, σεα θε φαβυλας προδεσεθ. Πρι αλικυαμ σωνφενιρε νο, εα ερυδιθι βλανδιτ σομπλεσθιθυρ φελ. Δενικυε ασυμσαν κυαεστιο συμ ει.
Κυις σολεατ σαδιψσινγ νε σεα. Φερρι πλαθονεμ σπλενδιδε μεα νε. Περ σανστυς υθροκυε πρινσιπες ετ. Σεμπερ δολορεμ ωμιτθαμ μει νο, συ υσυ συαφιθαθε μεδιοσριθαθεμ. Νοβις φασιλις σεα ατ.
</div><!--main_content-->
<div id="right_colon">right colon</div>
</div><!--bottom_container-->
<div id="footer">footer</div>
</div>
<!--my_scripts-->
<script src="js/jquery-1.9.1.min.js"></script>
<script><!--colons inherit height from main_content-->
$(document).ready(function(){
var contentDivHeight = $("#main_content").height();
$("#left_colon, #right_colon").css("height", contentDivHeight);
});
</script>
<!--end_my_scripts-->
</body>
</html>
and this is my css file:
body{
padding:0;
margin:0;
height:100%;
width:100%;
}
#main_container{
width:100%;
}
#top_container{
background-color:#999;
}
#header{
background-color:#DE0B16;
width:1000px;
height:100px;
margin: 0 auto;
}
#slider{
background-color:#00f;
width:1000px;
height:300px;
margin: 0 auto;
}
#main_menu{
background-color:#ccc;
height:50px;
}
#bottom_container{
width:100%;
text-align: center;
background-color:#f00;
margin: 0 auto;
}
#left_colon{
display: inline-block;
background-color:#CCDE0B;
width:120px;
}
#main_content{
display: inline-block;
background-color:#fff;
width:500px;
bottom:-500px;
}
#right_colon{
display: inline-block;
background-color:#CCDE0B;
width:120px;
}
#footer{
background-color:#98DE0B;
}
Thank you all for your time!
