How to Make a Border-Layout Using CSS

How to add borders to div without messing up the layout?

The problem is that when you add in the boarder, the size of the outer divs increased by 4, 2px on each size. So, your container needs to grow in size by 8px.

So change your container to:

 #container {
    width: 970px;
    background-color: #FFF;
    margin: 0 auto;
    overflow: hidden;
}

See: http://jsfiddle.net/QnRe4/13/

CSS border width changing layout

You can try this

div {    height: 300px;    width: 50%;    padding: 1px;    margin:10px;    border:0px solid red;}.red {    background-color: #ffcccc;}.green {    background-color: #ccffcc;}.blue {    background-color: #ccccff;}.purple {    background-color: #cccccc;}

<div class="red">    <div class="green">        <div class="blue">            <div class="purple"></div>        </div>    </div></div>

Border layout with bootstrap

See it this works for you.

<div class="container">
    <div class="page-header">
        <div class="row">
            <div class="col-xs-1">
                <div class="left-box">
                    <div class="turn-left">left</div>
                </div>
            </div>
            <div class="col-xs-10">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="top-box">top</div>
                    </div>
                    <div class="col-xs-12">
                        <div class="content-box">content</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-1">
                <div class="right-box">
                    <div class="turn-right">right</div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="footer">
    <div class="container">
        <p>sticky footer</p>
    </div>
</footer>

I used this example to assemble.

Like this any better?

Border around Layout

As far as I know the only way to do this is with CSS:

VerticalLayout vl = new VerticalLayout();
vl.addStyleName("layout-with-border");

And then modify your theme (.scss file) to include:

.layout-with-border {
    border: 1px solid black;
}

border layout with fixed regions with Compass & Sass?

Try this: http://jsfiddle.net/uwcEw/

Not perfect but close I think.

Nested border layout in css?

I'm not exactly the biggest fan of fixed layouts, but if I understand correctly this should be what you're trying to do: http://jsfiddle.net/8Cq9A/.

The dimensions are relative to the browser window, even the nested set of div's. What you needed to do to fix your layout was adjust your inner dimensions taking that into account. For example if your outer left and right div's widths are set to 10% (meaning 10% of the width of the browser window) to split the center div into 2 equal halves, you'd set each of their widths to: (100% - 10% - 10%) / 2 = 40%.

Personally, I'd look into using floats: http://jsfiddle.net/Sf8Kp/. The issue you will run into here though, is if you're wanting equal height columns as seen in the link.

There are MANY articles floating around on how to tackle this though. A few good reads that have been around for a while: alistapart (1, 2), positioniseverything. Search around for faux columns and 3 column [liquid|elastic|equal height] layout.

---

Related Topics