Member Avatar for romanromeo89

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 because: missing word
  • 3 Contributors
  • 3 Replies
  • 630 Views
  • 7 Months Discussion Span
  • Latest Post Latest Post by veera100
Member Avatar for drjohn

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% .

Member Avatar for romanromeo89

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;
}
Member Avatar for veera100

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;}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.