0

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!

Edited by romanromeo89: missing word

3
Contributors
3
Replies
36
Views
3 Years
Discussion Span
Last Post by veera100
0

Wrap another div around all three.
Give it a width in a suitbale percentage value.
Style it margin:auto;
Style the divs inside to have a width of about 33% .

0

thank you for your reply. The result now is better but the three divs still are not at the same line. I wrap the divs with onother one called bottom_container.
The css now is:

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:33%;


}
#main_content{
display: inline-block;
    background-color:#fff;
    width:33%;
}
#right_colon{
display: inline-block;
    background-color:#CCDE0B;
    width:33%;

}
#footer{
    background-color:#98DE0B;
}
0

add this code to your css style sheet bottom container

#bottom_container{display:table;}

and then add this in left-colon

left_colon{float:left;}

and add this in main-content

#main_content{float:left;}

and finaly add this right-colon

#right_colon{float:left;}
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.