Attempting to align three sections horizontally

Question

Attempting to align three sections horizontally

I'm having trouble with my current HTML code and I can't seem to figure out what the issue is. As a beginner in HTML, I am struggling to understand. My goal is to have three columns: one on the left taking up 20% of the space, one in the center taking up 60% of the space, and one on the right taking up 20% of the space.

#wrapper {
    background-color: #788D9A;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

#mainleft {
    width: 20%;
    float: left;
    padding: 10px;
    text-align: center;
    background-color: #ABB8C0;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    border-right: solid black;
    display:inline-block;
}

#maincenter {
    width: 60%;
    float: left;
    overflow: hidden;
    text-align: center;
    padding: 10px;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    display:inline-block;


}

#mainright {
    width: 20%;
    float: left;
    padding: 10px;
    text-align: center;
    background-color: #ABB8C0;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    border-right: solid black;

}

css html

Answer 1

Answer №1

It's important to be careful with your use of padding-left, padding-right, margin-left, margin-right, border-left, and border-right when working on a specific layout.

These styles can impact the overall width of an element, so adding padding: 10px may result in your div having a width of 20% + 20px.

If you desire inner padding and border styles, consider using an inner div.

For example: http://jsfiddle.net/b62Ju/2/

HTML

<div id="wrapper">    
    <div id="mainleft">
        <div>L</div>
    </div>
    <div id="maincenter">
        <div>C</div>
    </div>
    <div id="mainright">
        <div>R</div>
    </div>
</div>

CSS

#wrapper {
    background-color: #788D9A;
}

#wrapper > div
{
    height: 1000px;
    float: left;
    text-align: center;
}

#mainleft {
    width: 20%;    
    background-color: #ABB8C0;
}

#maincenter {
    width: 60%;
}

#mainright {
    width: 20%;
    background-color: #ABB8C0;
}

#maincenter > div
{    
    height: 1000px;
    border-left: solid black;
    border-right: solid black;
}

#mainleft > div, 
#maincenter > div,
#mainright > div
{
    padding: 10px;
}

Alternatively, you could utilize box-model styles:

.box
{
    box-sizing: border-box;
    ms-box-sizing: border-box;
    webkit-box-sizing: border-box;
    moz-box-sizing: border-box;
}

For more information: http://www.quirksmode.org/css/box.html

Answer 2

It's important to be careful with your use of padding-left, padding-right, margin-left, margin-right, border-left, and border-right when working on a specific layout.

These styles can impact the overall width of an element, so adding padding: 10px may result in your div having a width of 20% + 20px.

If you desire inner padding and border styles, consider using an inner div.

For example: http://jsfiddle.net/b62Ju/2/

HTML

<div id="wrapper">    
    <div id="mainleft">
        <div>L</div>
    </div>
    <div id="maincenter">
        <div>C</div>
    </div>
    <div id="mainright">
        <div>R</div>
    </div>
</div>

CSS

#wrapper {
    background-color: #788D9A;
}

#wrapper > div
{
    height: 1000px;
    float: left;
    text-align: center;
}

#mainleft {
    width: 20%;    
    background-color: #ABB8C0;
}

#maincenter {
    width: 60%;
}

#mainright {
    width: 20%;
    background-color: #ABB8C0;
}

#maincenter > div
{    
    height: 1000px;
    border-left: solid black;
    border-right: solid black;
}

#mainleft > div, 
#maincenter > div,
#mainright > div
{
    padding: 10px;
}

Alternatively, you could utilize box-model styles:

.box
{
    box-sizing: border-box;
    ms-box-sizing: border-box;
    webkit-box-sizing: border-box;
    moz-box-sizing: border-box;
}

For more information: http://www.quirksmode.org/css/box.html

Answer 3

Answer №2

Utilizing the display: table properties appears to be the optimal solution in this scenario. With this approach, you can achieve equal height columns (presumably addressing the unusual bottom margin/padding), eliminate the need for extra markup, and incorporate padding without the hassle of adjusting the box-model. For more information on the box-model, refer to: http://css-tricks.com/the-css-box-model/.

Check out the code demonstration here: http://jsfiddle.net/b62Ju/3/

#container {
    display: table;
    width: 100%;
}

#wrapper > div
{
    display: table-cell;
    padding: 1em;
}

#left-column {
    width: 20%;    
    background-color: orange;
}

#center-column {
    width: 60%;    
}

#right-column {
    width: 20%;
    background-color: green;
}

Answer 4

Utilizing the display: table properties appears to be the optimal solution in this scenario. With this approach, you can achieve equal height columns (presumably addressing the unusual bottom margin/padding), eliminate the need for extra markup, and incorporate padding without the hassle of adjusting the box-model. For more information on the box-model, refer to: http://css-tricks.com/the-css-box-model/.

Check out the code demonstration here: http://jsfiddle.net/b62Ju/3/

#container {
    display: table;
    width: 100%;
}

#wrapper > div
{
    display: table-cell;
    padding: 1em;
}

#left-column {
    width: 20%;    
    background-color: orange;
}

#center-column {
    width: 60%;    
}

#right-column {
    width: 20%;
    background-color: green;
}

Answer 5

Answer №3

If we ever have the need to arrange three elements next to each other, here's how it can be done:

Using HTML:

<div class="main">
    <div class="left">...</div>
    <div class="center">...</div>
    <div class="right">...</div>
</div>

And with CSS styling:

.main {
    width: 1000px;
    float: left;
    display: inline-block;
}

.left {
    width: 20%;
    float: left;
    display: inline-block;
}

.right {
    width: 20%;
    float: left;
    display: inline-block;
}

.center {
    width: 60%;
    float: left;
    display: inline-block;
}

This setup should do the trick. Remember to adjust the width of the main wrapper div in your code as needed.

Answer 6

If we ever have the need to arrange three elements next to each other, here's how it can be done:

Using HTML:

<div class="main">
    <div class="left">...</div>
    <div class="center">...</div>
    <div class="right">...</div>
</div>

And with CSS styling:

.main {
    width: 1000px;
    float: left;
    display: inline-block;
}

.left {
    width: 20%;
    float: left;
    display: inline-block;
}

.right {
    width: 20%;
    float: left;
    display: inline-block;
}

.center {
    width: 60%;
    float: left;
    display: inline-block;
}

This setup should do the trick. Remember to adjust the width of the main wrapper div in your code as needed.

Attempting to align three sections horizontally

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to cycle through the data within the Django template system?

Displaying a loading animation within a specific div element

Adjust the height to match the shortest sibling child div height

The variation in CSS output between Google Chrome on Windows and Ubuntu

How is the height and width of the header determined?

Is It Possible for an HTML Page to Load Within an iframe?

What is the best way to expand a scrollbar's width with CSS?

JQuery Tic Tac Toe Duel: Face Off Against Your Friend in a Thr

javascript Incorrectly using location.reload will not refresh the page as intended

Using jQuery's toggleClass method to implement CSS transformations

The transfer of information through HTTP

Efficiently filter through numerous options with a search-enabled multiselect feature

The Mystery of jQuery Isotope Plugin: Why Can't I Add "display:none" Inline?

Packages have gone astray post node_modules scrub

I am having an issue with the <a> element in my bootstrap carousel, as it is displaying a dead link

Is there a way to turn off vue.js transitions specifically for testing purposes?

Is it possible to write CSS 3 rows without using the :not() selector for improved efficiency?

Tips for enhancing the clarity of elements in KineticJS

Creating a right-aligned glyph within a Panel header using Bootstrap

Ensure that any relevant information is placed adjacent to a floated image