CODEWITHSUNDEEP
htmlcss
Adrian
Adrian

Reputation: 3448

Creating floating sidebars with a content area in the middle CSS

I am having trouble getting my basic layout to work. I am new at HTML and CSS. How can I attain a 3 column setup on my website to allow for proper placing of ads along the sides?

I currently have 2 floating sidebars left and right and one content area that is not floating but there seems to be an invisible margin between the content area and the side bars.

margin issue

HTML

<div class="float-left left-ad-space">
    <div class="filler"></div>
</div>
    <div class="float-right right-ad-space">
    <div class="filler"></div>
</div>
<div class="body-wrapper">
    <div class="filler">
        <div style="width: 100%; margin-left: auto; margin-right: auto;">
        @RenderSection("Featured", false)

    </div>

    <div>
        @RenderBody()
    </div>
    </div>

</div>

CSS

body {
    width: 100%;
    background-color: white;
    height: 1200px;
}

.body-wrapper {
    width: 900px;
    height: 100%;
}

.left-ad-space {
    height: 500px;
    width: 160px;
}

.right-ad-space {
    width: 160px;
    height: 500px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.filler {
    width: 100%;
    border-style: solid;
    border-width: 3px;
    border-color: blue;
    height: 100%;
}

Upvotes: 1

Views: 761

Answers (2)

v3nturetheworld
v3nturetheworld

Reputation: 61

You can use this idea for your design. If you want more info look up html5 3 column layouts.

<div class="columns">
    <div class="lcol"></div>
    <div class="ccol"></div>
    <div class="rcol"></div>
</div>

.colums { width:800px;} /*your wrappers width */
.lcol, .ccol, .rcol {
    background: gray;
    margin: 0 10px;
    padding: 10px;
}
.lcol { /*left column*/
    float: left; 
    width: 100px;
}
.ccol {/*center column*/
    float: left;
    width: 300px;
}
.rcol { /*right column*/
    float: right;
    width: 100px;
}

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 241238

You need to center the middle column.

EXAMPLE HERE

.body-wrapper {
    width:900px;
    height:100%;
    margin:0 auto;
}

Aside from that, your calculations are a bit off because of the borders.

You could use box-sizing:border-box in order to include the element's border within it's dimension calculations. Most people just apply this property to all elements:

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

You would otherwise need to include this on the individual elements.

Upvotes: 4

Related Questions