CODEWITHSUNDEEP
htmlcss
MJMacarty
MJMacarty

Reputation: 537

right column alignment problems

Sorry if this is already in the lexicon, but I couldn't find it. I have what I think is a pretty simple three column header, where I can't get the right column to align with the left two columns. It shows up below the left columns even though there is plenty of space. I have three divs that make up each column, and I am guessing the problem is in there somehow.

Here is the css I am using:

body {
    background-color: #ffaa00;
}
#container {
    width: 1268px;
    height: 900px;
    background-color: #fff;
    margin: 0 auto;
}
/* header styles */
#main {
    height: 110px;
    width: 715px;
    margin: 0 auto;
    background-color: #ccc;
    border-radius: 6px;
}
#frame {
    height: 100px;
    width: 705px;
    background-color: #336699;
    position: relative;
    top: 5px;
    left: 5px;
    border-radius: 6px;
}
#content {
    height: 90px;
    width: 695px;
    background-color: #ffc;
    position: relative;
    top: 5px;
    left: 5px;
    border-radius: 5px;
    text-align: center;
    vertical-align: ;
}
/* left header */
#left {
    float: left;
    height: 110px;
    width: 268px;
    margin: 0 auto;
    background-color: #ccc;
    border-radius: 6px;
}
#left-frame {
    height: 100px;
    width: 258px;
    background-color: #336699;
    position: relative;
    top: 5px;
    left: 5px;
    border-radius: 6px;
}
#left-content {
    height: 90px;
    width: 248px;
    background-color: #ffc;
    position: relative;
    top: 5px;
    left: 5px;
    border-radius: 5px;
    text-align: center;
}
/* right header */
#right {
        display:inline-block;
    float: right;
    height: 110px;
    width: 268px;
    background-color: #ccc;
    border-radius: 6px;
}
#right-frame {
        display:inline-block;
    height: 100px;
    width: 258px;
    background-color: #336699;
    position: relative;
    top: 5px;
    left: 5px;
    border-radius: 6px;
}
#right-content {
      display:inline-block;
    height: 90px;
    width: 248px;
    background-color: #ffc;
    position: relative;
    top: 5px;
    left: 5px;
    border-radius: 5px;
}
h1 {
    display: inline-block;
    margin-top: 15px;
    font-size: 3em;
    font-family: lucida grande;
    color: #336699;
}

And the html:

<body>
<div id="container">
    <div id="left">
        <div id="left-frame">
            <div id="left-content">

                <img src="images/keyboard.jpeg" style="width:248px; height:90px; border-radius:5px;"
                alt="this is a picture">

            </div>
        </div>

    </div>

    <div id="main">
        <div id="frame">
            <div id="content">

                <h1>HERE IS A HEADING!</h1>

            </div>
        </div>

    </div>

    <div id="right">
        <div id="right-frame">
            <div id="right-content">

            </div>
        </div>

    </div>
</div>

Any insight is appreciated.

Upvotes: 0

Views: 32

Answers (1)

JRulle
JRulle

Reputation: 7568

What you really need to do is just float the three elements left and if you want spacing between then set the left/right margins on #main. This solution keeps all items in the document flow properly.

#main {
    height: 110px;
    width: 715px;
    margin: 0 8px; /* changed 'auto' to '8' to even up padding */
    background-color: #ccc;
    border-radius: 6px;
    float: left; /* added float */
}

#left {
    float: left;
    height: 110px;
    width: 268px;
    margin: 0; /* removed 'auto' because it isn't necessary when floated */
    background-color: #ccc;
    border-radius: 6px;
}

#right {
    display:inline-block;
    float: right; /* no need to adjust this */
    height: 110px;
    width: 268px;
    background-color: #ccc;
    border-radius: 6px;
}

JSFiddle Demo

Upvotes: 1

Related Questions