CODEWITHSUNDEEP
csshtmlcss-floatborder
Xavjer
Xavjer

Reputation: 9274

Best way creating left/right border

I currently have the following layout for my webpage:

  <div class="content-body">
    <div class="left-content-bar siteborder"></div>
    <div class="inner-content">
    ... some content
    </div>
    <div class="right-content-bar siteborder"></div>
  </div>

I have made a repeating background-image for left and right content bar. I want the bar to always go from the top of the page to the end of the page. My current problem is, that the bars only take as much space as the inner-content (the bars end at the bottom end of the content)

I found a solution, so that the bars will always go to the bottom, but this includes a min-height which I don't like, because it will have a lot of whitespace with a small screen resolution.

See this css for my current solution (The height will always be minimum 1000px with this, and this shouldn't be):

.content-body{
position:relative;
overflow:hidden;
min-height: 1000px;
height: auto !important;
height: 1000px;
}
.left-content-bar{
    float:left;
    position:relative;
    width: 10px;
    background-image: url(/default/images/content-left.png);
    background-repeat:repeat-y;
    margin:0px;
    padding:0px;
    padding-bottom: 32000px;
    margin-bottom: -32000px; 
}
.right-content-bar{
    float:left;
    position:relative;
    width: 14px;
    background-image: url(/default/images/content-right.png);
    background-repeat:repeat-y;
    margin:0px;
    padding:0px;
    padding-bottom: 32000px;
    margin-bottom: -32000px;    
}
.inner-content{
float:left;
width:956px;
position: relative;
height: auto;
min-height: 100% !important;
}

I hope that anyone can give me a better solution than my current

Upvotes: 0

Views: 131

Answers (2)

Pevara
Pevara

Reputation: 14308

I would approach this a bit differently. With the same html as your sample, my css would look something like this:

.left-content-bar{
    position:fixed;
    width: 10px;
    left: 0;
    top: 0;
    bottom: 0;
    background:url(/default/images/content-left.png) repeat-y;
}
.right-content-bar{
    position:fixed;
    width: 10px;
    top: 0;
    right: 0;
    bottom: 0;
    background:url(/default/images/content-right.png) repeat-y;
}
.inner-content{
    padding: 0 10px; /* same padding left and right as the width of the sidebars */
}

I positioned the sidebars fixed. By setting both the bottom and the top property to 0 they stretch up to the height of the viewport. By then adding some padding to the actual content wrapper I make sure the sidebars and the content don't overlap.

I set up a small example to demonstrate: http://jsfiddle.net/4Swvu/1/

Feel free to ask if you want some more explanation.

Edit:
If you want the sidebars on your content, rather then on you viewport, you could slightly adapt the code. The technique also works with position absolute so you could make your css look something like this:

.content-body {
    position: relative;
    width: 400px;  
    margin: 0 auto;
}
.left-content-bar{
    position:absolute;
    width: 10px;
    left: 0;
    top: 0;
    bottom: 0;
    background:#cff;
}
.right-content-bar{
    position:absolute;
    width: 10px;
    top: 0;
    right: 0;
    bottom: 0;
    background:#cff; 
}
.inner-content{
padding: 0 10px; /* same padding left and right as the width of the sidebars */
}

and the fiddle: http://jsfiddle.net/4Swvu/5/

Upvotes: 0

Ali Bassam
Ali Bassam

Reputation: 9969

Have you tried to use inline-block instead of float ?

Using float was originally made to display text around a picture, not to display divs the way you like (move away from floats if you can).

Anyway, using display:inline-block; you can put the 3 divs beside each other, and have the left and right column reach the bottom.

.content-body{
    height:1000px;
}
.siteborder{
    height:100%;
    width:100px;
    display:inline-block;
    vertical-align:top;
}
.inner-content{
    width:150px;
    display:inline-block;
    vertical-align:top;
}

Live example : http://jsfiddle.net/8vQrU/

Upvotes: 1

Related Questions