Menu
First question on SOF, please be gentle if this may be a stupid question. :) Haven't found a solution, neither here nor on the web.
I got some trouble with CSS. I pasted my code at the end of this post but first Ill explain what I'm trying to accomplish:
I want to build a centered fixed-width content area with endless vertical graphical borders to the left and right.
This is what I tried:
I created a #content div with a .wrapper div inside. Standard procedure to center a div Id say. Gave the #content the background property for the left border and the .wrapper div the right background. #content works fine: endless left border. But .wrapper stays the same height as its content. So if there is less content then the browser-height the border won't be endless.
If I set the content heights to 100% the borders show till the bottom of the page, but if the content is higher then the browser height and I scroll down the borders don't continue.
I inserted another div between #content and .wrapper: #contentbr and gave that div the same propertys as #content but with the right border graphic: Won't work, the height stays the same as the content of the wrapper.
Tried some more minor tweaks but neither worked out the way I want it.
Sad thing is: Nr. 2 works fine if I set the background property of #content to this: _background: url(img/content_left.png) top left repeat-y, url(img/content_left.png) top right repeat-y;_
Sadly the IE doesn't know CSS 3 so this is no solution as I can't ignore the IE.. :(
So im hoping for some help of you guys. Someone has to know how to do this magic.
Important notice on my HTML & CSS example: I replaced the background-properties with border-properties. In reality the left and right borders need to be two different images and use the commented backround-properties!
HTML & CSS:
<!doctype html>
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
<style type="text/css">
html, body { height: 100%; }
#content
{
margin: 0 auto;
width: 950px;
/* this is the real deal: */
/* background: url("img/content_left.png") top left repeat-y; */
/* this is just for the example */
border-left: 1px solid black;
height: auto !important;
height: 100%; /* IE 6 Workaround */
min-height: 100%;
}
#content .wrapper
{
/* this is the real deal: */
/* background: url("img/content_right.png") top right repeat-y; */
/* this is just for the example */
border-right: 1px solid black;
height: auto !important;
height: 100%; /* IE 6 Workaround */
min-height: 100%;
padding: 0px 70px;
}
</style>
</head>
<body>
<div id="content">
<div class="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada, lorem ut lobortis congue, ligula risus condimentum enim,
vel ornare mi elit et purus. Duis justo libero, posuere nec ullamcorper nec, tempus nec augue. Maecenas rhoncus, sapien a dapibus
accumsan, nisl mi gravida arcu, id congue neque nisi vitae lacus. Morbi dapibus mollis tempor. Praesent tortor ipsum, rhoncus in
rhoncus sit amet, luctus nec nibh. Donec enim massa, fermentum et consectetur et, iaculis nec tortor. Mauris massa elit, pellentesque
id vestibulum in, vehicula nec elit. In congue purus vitae mauris adipiscing a sollicitudin dolor consectetur. In lacus lectus,
auctor nec facilisis non, tempus ut neque. Sed id elit vel dui porta condimentum vitae ac lorem. Nam suscipit elit ac est sollicitudin
sed faucibus tellus aliquam. Sed quis libero odio, pellentesque fermentum odio. Aliquam hendrerit dignissim sapien a vestibulum.
Phasellus aliquam pretium erat eu feugiat. Quisque enim arcu, sagittis at venenatis quis, auctor vitae diam. Donec sed arcu sapien.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eget lacus id enim pulvinar ullamcorper.
</p>
</div>
</div>
</body>
</html>
737
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
I removed the margin and padding from all elements to prevent the gap between document edge and border.
* { margin: 0; padding: 0; }
To use the 100% height on the #wrapper as well as the #content div, use this:"
#content { position: relative }
#wrapper { position: absolute }
This is what I get:
http://manson.revora.net/test.html
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
