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
  • 653 Views
  • 7 Months Discussion Span
  • Latest Post Latest Post by veera100

Dani AI

Generated

Short summary and causes: the three columns are not lining up because of the combination of inline-block baseline alignment, possible whitespace/wrapping, and a stray bottom:-500px value that serves no purpose for static elements. was right to suggest a wrapper; 's float/table ideas work but require extra clearing and a fixed wrapper width to center the group. A simpler, more robust option today is Flexbox — it centers the group, keeps columns equal-height without JS, and is responsive by design.

Example Flexbox CSS (replace the bottom-container rules):

#bottom_container {
  display: flex;
  justify-content: center; /* center the three columns as a group */
  align-items: stretch;    /* make all columns match height */
  gap: 16px;               /* spacing between columns */
  padding: 16px 0;
  box-sizing: border-box;
}

#left_colon, #right_colon {
  flex: 0 0 120px;         /* fixed side columns */
  min-width: 80px;
}

#main_content {
  flex: 1 1 500px;         /* main column grows/shrinks, prefers 500px */
  max-width: 900px;
}

Small responsive tweak (stack when narrow):

@media (max-width: 700px) {
  #bottom_container { flex-direction: column; align-items: center; }
  #left_colon, #main_content, #right_colon { flex: 0 0 auto; width: 90%; }
}

Troubleshooting checklist: remove the bottom:-500px line from the main content; stop the jQuery height-copy script (Flexbox makes it unnecessary); use box-sizing: border-box so padding/borders don’t force wraps; if you stick with inline-block, add vertical-align: top on the columns and use font-size:0 on the container to remove inline whitespace. Flexbox gives the cleanest, most maintainable result.

Recommended Answers

All 3 Replies

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.