Databases
StackOverflow2013
Postsdbo
POHelp with DIV layout and CSS height
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHelp with DIV layout and CSS height
    text
    copied!<p>Please see the screenshot. I am trying to produce a layout that allows me to apply shadow to either side of the main div using the divs left (headerLeft) and right(headerRight), I then have the content div(header) that holds the header content. This is all wrapped in a div (headerWrapper). I am using 4 divs to do this. I have it working on my header, nav bar and another bar I am using. This is shown with the colour coded divs on the screenshot. The reason this works is because my CSS is using heights given in pixels. However I have problem. I want to apply this to my main content, but it won't work. The content is going to change in height from page to page this is fine, however my divs that contain the shadows don't appear, unless I give them a fixed pixel height. Please help.The red areas show where the left and right divs containing the shadows should appear.</p> <p><a href="http://www.webquark.co.uk/layoutProblem.jpg" rel="nofollow noreferrer">layoutProblem http://www.webquark.co.uk/layoutProblem.jpg</a> </p> <p>Here is the CSS I have for the layouts that work:</p> <pre><code> #header{ margin:0 auto; height:160px; width: 76%; min-width:850px; font-size: 14pt; font-family: Calibri, Verdana, Ariel, sans-serif; color: #ffffff; background-image: url(headerBG.jpg); background-repeat: repeat-x; } #headerWrapper{ height:145px; width:100%; /**background-color: #202020;**/ } #headerLeft { float: left; width: 12%; height:145px; background-image: url(shadowLeft.png); background-repeat: repeat-y; background-position: center right; /**background-color: #1e1e1e;**/ } #headerRight { float: right; width: 12%; height:145px; background-image: url(shadowRight.png); background-repeat: repeat-y; background-position: center left; /**background-color: #1e1e1e;**/ } </code></pre> <p>Basicly I think I need away of making the left and right divs height 100%, I have tried setting the height to 100% but it doesnt work. I also have my body height set to 100%</p> <p>Cheers, hope you can help. </p> <p>HTML for the working top bar and Header: </p> <pre><code>&lt;div id="topWrapper"&gt; &lt;div id="topRight"&gt; &lt;/div&gt; &lt;div id="topLeft"&gt; &lt;/div&gt; &lt;div id="top"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="headerWrapper"&gt; &lt;div id="headerRight"&gt; &lt;/div&gt; &lt;div id="headerLeft"&gt; &lt;/div&gt; &lt;div id="header"&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload