Displaying divs inline with one on center

Question

Okey here's my problem. I'm new in CSS so chill on me. I want to make simply design for my website with 3 divs: Left Bar, News and Right Bar. I want the Left Bar to have 15px margin to left and min margin with News 15px. Same on right bar but with right margin. I want the News div to be on center all the time with width 700px or sth like that I dont know exactly how much for now. And I dont know how to make them be in line. I mean when a person is resizing his browser i want the news always be on center but when it hit critical 15px with any bar it stops. I was searching for this about 2h and was trying any dipslays, floats etc. but maybe I miss sth.

my divs:

<div id="main">
    <div id="leftbar">
    </div>

    <div id="newsContainer">
        @RenderBody()

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </div>


    <div id="rightbar">

    </div>
</div>

My CSS for now:

#leftbar
{
    width: 300px;
    margin: 0 15px;
    background-color: red;
}

#newsContainer
{
    width: 700px;
    margin: 0 auto;
    background-color: blue;
}

#rightbar
{
    width: 200px;
    margin: 0 15px;
    background-color: yellow;
}

And visualy I want it to be like this:

http://imagizer.imageshack.us/v2/1000x795q50/538/RENDkl.jpg

@Edit: In this fiddle its perfect but somehow the rightbar is under this both divs

http://jsfiddle.net/sirithcam/x3nw5hvg/

Something like that: http://stackoverflow.com/questions/18420917/how-to-make-3-column-layout-with-fluid-center-without-floats/18420957#18420957 ? — Hashem Qolami, Sep 11 '14 at 19:20
I'm pretty sure you can achieve your aim using float:left; margins and also you might try using percentages for widths, instead of absolute pixel values.. Have you a js fiddle I can use? I'm just lazy like that :) — ne1410s, Sep 11 '14 at 19:23
http://jsfiddle.net/sirithcam/x3nw5hvg/ it works now perfect with left bar and news but somehow rightbar isnt good, i mean with floating and display:table — Matthew Jaeger, Sep 11 '14 at 19:31

score 1 · Answer 1 · answered Sep 11 '14 at 19:52

You can do this just using display: table on your main and display: table-cell on your columns.

Demo Here

#main {
    display: table;
    width: 100%;
    border-spacing: 15px 0;
}
#leftbar, #rightbar, #newsContainer {    
    display: table-cell;
    border: 1px solid;
    text-align: center;
}
#leftbar {
    width: 20%;
}
#newsContainer {
    width: 60%;
}
#rightbar {
    width: 20%;
}

score 0 · Answer 2 · answered Sep 11 '14 at 19:46

0

I think you can try just use the float to do this.For the three div, all set them float to left. The second one will automatically to be in center. If you want to put the div position fixed, you need to use {position: absolute; Left: ???px;} like this.

answered Sep 11 '14 at 19:46

user4028185

1

1

with just floating when i want to resize my browser the divs are going to the bottom of the site so its not what i mean, and in "center" i mean its in center of the site not the divs – Matthew Jaeger Sep 11 '14 at 19:49
Is something like this ?http://stackoverflow.com/questions/5012111/how-to-position-a-div-in-the-middle-of-the-screen-when-the-page-is-bigger-than-t – user4028185 Sep 11 '14 at 19:56
http://jsfiddle.net/sirithcam/x3nw5hvg/ its perfect here but somehow the rightbar is under both of the divs :/ – Matthew Jaeger Sep 11 '14 at 20:07
Just use width and float to do it. I changed your code, take a look at this one. You can change the exact position by adding some margin. http://jsfiddle.net/x3nw5hvg/1/ – user4028185 Sep 11 '14 at 21:44

score 0 · Answer 3 · answered Sep 11 '14 at 22:00

Here is a simple way of doing it if you don't mind tweaking your HTML slightly and if you want to use floats.

Start with:

<div id="main">
        <div id="leftbar">Left Bar</div>    
        <div id="rightbar">Right Bar</div>
        <div id="newsContainer">News</div>
</div>

and use the following CSS:

#main {
    width: 100%;
    min-width: 430px;
}
#leftbar, #rightbar, #newsContainer {    
    border: 1px dotted blue;
}
#leftbar {
    float: left;
    width: 100px;
}
#newsContainer {
    width: 200px;
    margin: 0 auto;
}
#rightbar {
    float: right;
    width: 100px;
}

Based on your example, you probably want fixed width columns with the whitespace varying a bit between them.

To keep the floats on the same line, make sure to add min-width: 430px to #main.

See demo at: http://jsfiddle.net/audetwebdesign/5vpf3n6c/

Other solutions are possible depending on what you need. A CSS table solution is also a good option.

Displaying divs inline with one on center

3 Answers3