I am new to coding and have a small problem I can't figure out. I have a #wrapper div defined to allow me to center my content on the page and color the background white (background color defined in css). Whenever I have the height property set to auto, I have a white box at the top of my page when rendered which seems to represent the padding definitions I have set in the #wrapper properties. My actual page height is fine when rendered meaning that all the content appears as expected, but the only way to make the white box extend to the bottom of the page so the whole background is white is to enter a fixed height value. Here's what I have:
#wrapper {
width: 940px;
height: auto;
/* border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000; */
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
position: relative
}
Any help is surely appreciated!
#wrapper {overflow: hidden}
OR
#wrapper {overflow: auto}
If you want the #wrapper div to extend to the bottom of the page you need to provide an explicit height. height: auto will adjust to fit the content only. If #wrapper is a direct child of your main page div or just below your body you can set that parent element (body or some div) to something like 100% or a static value and then set your #wrapper to a percentage of that value like...
I am NOT advocating inline styles!! just an example
<body style="height: 480px">
<div id="wrapper" style="height: 95%">
content!
</div>
</body>
Body could also be a percentage and would then adjust to the window height, might work but is probably not what you want, just another option.
Related
In my page I have three sections Header, Body and Footer.
In body I have three divs. First div includes another two small divs.
I wrote this CSS code:
#body_container{
margin: 10px 160px;
height: auto;
width: 100%;
clear: both;
border: 1px solid #3F0;
}
div.body_contents{
height: auto;
width: 74%;
float: left;
border: 1px solid #960;
}
div.sidebar{
height: auto;
width: 25%;
float: right;
border: 1px solid #F0F;
}
but when I check it, div is out of my frame. I gave 160px margin of left and right. what should i do?
Thanks
I hate using percentages since they depends on other things.
I usually do something with static values, like :
#body_container{
margin: 10px auto; /** The auto will make this div centered to the page **/
width: 1000px; /** suppose you want this width **/
clear: both;
border: 1px solid #3F0;
}
div.body_contents{
width: 748px; /** The width of the main part, -2px (for the border) **/
float: left;
border: 1px solid #960;
}
div.sidebar{
width: 248px; /** The width of the side bar, -2px (for the border) **/
border: 1px solid #F0F;
}
Of course, if you want the width of you main div to change regarding of the size of the browser (as it would be with your original CSS), my answer doesn't work.
But I would recommend you to NOT do a change of width based on the browser since it would change the organization of your page depending on the window.
That's simple, margin adds to the final rendered width of the element (that's 160 x 2 + 100% of parent's width, so it is overflow), so you may want to make it, for example, for the outer div, that width is 79%, and the left and right margin is 10% each (so total is 99%, 1% less to allow some room for borders, etc... although that's usually not how I do it)
example: http://jsfiddle.net/MKjwU/6/
one more thing: to clear the floats, you don't clear it like in your example...
either use an extra div, like this: http://jsfiddle.net/MKjwU/7/
or using this technique: http://www.quirksmode.org/css/clearing.html
see it at: http://jsfiddle.net/MKjwU/8/
just wanted to know how i can change my navigation menu to have an indented effect. Like 1px of one light colour, and 1 px of darker colour.
Also does anybody know why i couldn't auto center the content in white, i tried margin:0 auto; but had to code in a weird workaround.
soz, site is http://digitalgenesis.com.au/sites/1
Cheers
Daz
You could probably use border-style: inset; for the border effect you want, there's no need for nested block trickery or anything like that.
Your #infowrap element won't auto-center with a simple margin: 0 auto; because it is a block element and hence its default width is the width of its parent, this causes the auto left and right margins to come out as zero. The margin: 0 auto; will work if you wrap the insides in a block and give it an explicit width (for example: http://jsfiddle.net/ambiguous/aMemg/).
http://jsfiddle.net/jkmwy/
you can style the border left/right/top/bottom to create a bevel effect.
html
<div id="a"><div id="b">blah</div></div>
css
#b {
height: 200px;
text-align: center;
background-color: white;
border: 1px solid red;
line-height: 200px;
}
#a {
border: 1px solid yellow;
width: 300px;
}
body {
background-color: black;
}
Here's my code, reduced to the relevant parts:
<html><head><title></title>
<style type="text/css">
body { background-color: #fff; }
#titlebar{ border: solid 1px black; margin:10px; }
#bodyWrapper{ float: left; width: 100%; }
#bodyColumn{ margin-left: 230px; height:500px; }
#menuColumn{
float: left;
width: 230px;
border: solid 1px black;
margin-left: -100%;
height:500px;
}
.bigContent{ width: 100%; margin:10px; }
.section{
border: 1px solid black;
padding:10px;
overflow: auto;
}
</style></head><body>
<div id="titlebar">Title</div>
<div id="bodyWrapper"><div id="bodyColumn">
<table class="section bigContent"><tr><td>FIRST</td></table></table>
<div class="section bigContent">SECOND</div>
</div></div>
<div id="menuColumn">MENU</div>
</body></html>
My problem:
The <div> containing "SECOND" is wider than the <table> containing "FIRST" although both are siblings and have width=100% via the same CSS class
The <div> is also wider than the screen, causing scrollbars to appear
Why is this and what can I do to fix it?
Note: I am seeing the same problems in both Firefox 3.6 and IE 8
This is because of the padding. In CSS, the width property applies to the content box of elements, without the padding.
See http://www.w3.org/TR/CSS21/box.html : The width property applies to the Content block in the following schema:
So the outer element's width is 100% of the parent's width, plus 10px of left padding and 10px of right padding.
Given that this element is a block element, it should not be necessary to specify its width to 100%.
So the solutions are:
To not set a width
To take the padding into account when setting the width (here this would require to set the padding in %, e.g. 2% of padding and a width of 96% (100-2*2)
I have two divs placed inside a larger div. Each one of these two divs contains dynamically generated content and thus their heights vary, so I cannot know which one of the two will be taller. The parent div they are placed in has a 1px border and I would like to have 1px line between these divs as well, so that the line extends all the way down to the bottom of the parent div which adjusts itself based on the heights of the child divs. This is much easier to understand in the following picture:
I have tried setting the child divs to a height of 100%, but that does not seem to be working. How can I accomplish this effect? (This also needs to work in IE6)
Well, this is relatively easy, if all you want is a single border extending to the full height of the tallest element (in this case the tallest div), albeit my solution doesn't really address the potential equal heights issue (if you wanted the background-color of each div to extend to the full-height of the tallest element. It does, though, satisfy your request for the full-height single border:
#left,
#right {
width: 40%; /* adjust to taste */
float: left;
padding: 1em; /* adjust to taste */
}
#left {
border-right: 4px solid #000; /* adjust to taste */
}
#right {
border-left: 4px solid #000;
margin-left: -4px; /* the negative width of the border */
}
JS Bin Demo.
Edited to address my misunderstanding/mis-reading of the question.
This approach is kind of a hack, but is achievable using the same mark-up as in the previous demo, but more complex CSS:
#left,
#right {
width: 40%;
float: left;
padding: 1em;
}
#left {
border-right: 4px solid #000;
}
#right {
border-left: 4px solid #000;
margin-left: -4px; /* the negative width of the border */
}
#right p,
#left p {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin: 0;
padding: 0 0.5em 1em 0.5em;
}
#right p:first-child,
#left p:first-child {
padding-top 1em;
border-top: 1px solid #ccc;
}
#right p:last-child,
#left p:last-child {
border-bottom: 1px solid #ccc;
}
Demo at JS Bin.
This won't be cross-browser friendly, though, IE (for certain) is likely to have problems with, at least, the :last-child pseudo-selector, so a JavaScript solution might be better for you in this instance. Although there is a more simple option to wrap the inner divs (in this case the #left and #right divs) in another div:
<div id="wrap">
<div id="left">
<div class="innerWrap">
<!-- content -->
</div>
</div>
<div id="right">
<div class="innerWrap">
<!-- content -->
</div>
</div>
</div>
Which can be used with the css:
#left,
#right {
width: 40%;
float: left;
padding: 1em;
}
#left {
border-right: 4px solid #000;
}
#right {
border-left: 4px solid #000;
margin-left: -4px; /* the negative width of the border */
}
div.innerWrap {
border: 1px solid #000;
}
Demo at JS Bin
But, while that's more cross-browser friendly, it does start a descent into the madness that is divitis.
try div {overflow:auto } where DIV is the container. or you can use the clearing DIV which you have to add after DIV 2 and before the main DIV .clear { clear:both }
EDIT: I overlooked - you wanted the DIVs to be set at equal height? That's not gonna happen due to the fact that it's a free flow document. You will need to use Javascript where it can look at the tallest DIV and set other DIV to match that height.
http://www.kensfi.com/set-a-div-height-equal-with-of-another-div/
considering you want this to degrade nicely all the way back to IE 6 have you considered a 3-column table with the center column with width of 1px band background-color of your divider color? outside olumns being the containers of your DIVs
I'm partial to JS in this case. If you assign an id to each div, then at the end of the loading of content call something like this (this is NOT REAL CODE):
if (get(div1).offsetHeight > get(div2).offsetHeight( {
div1.borderRight = 1px;
else
div2.borderLeft = 1px;
Oh...I may have misread that. If you want the divider to stretch the entire parent div, then set div1.style.height to divParent.clientHeight and add the border to it.
I am having issues with the below HTML when resizing the window;
1: Right bar suddenly drops down when the width is resized too small.
2: Spacing between the content and right bar gets larger as the width gets larger.
<style type="text/css">
#content {
width: 80%;
float: left;
height: 500px;
border:2px solid #00ff00;
}
#rightbar {
max-width: 200px;
width: 17%;
float: right;
border:2px solid #ff0000;
}
#rightbar a {
display: block;
padding: 5px;
background-color: #F0F4FF;
margin: 3px;
}
#rightbar a:hover { background-color: #1D3E93; color: #fff; }
</style>
<div id="content">contents</div>
<div id="rightbar">
link 1
link 2
link 3
</div>
There are two ways to get the result you want:
put the right bar before the content
in the html, remove the width from
the content and give it a right
margin instead (width of the right
bar + something extra)
position the right bar absolutely on the right, remove the width from
the content and give it a right
margin instead (see number 1.)
By the way, the problem is that you are mixing absolute and relative widths and what you see is exactly what you are supposed to see.
Edit: After re-reading your question, I think that with overflow:hidden (makes it a nice square block) on the content part, you can get it to work in combination with 1. without the margin:
<style type="text/css">
#content {
overflow: hidden;
height: 500px;
border:2px solid #00ff00;
}
#rightbar {
max-width: 200px;
width: 17%;
float: right;
border:2px solid #ff0000;
}
#rightbar a {
display: block;
padding: 5px;
background-color: #F0F4FF;
margin: 3px;
}
#rightbar a:hover { background-color: #1D3E93; color: #fff; }
</style>
<div id="rightbar">
link 1
link 2
link 3
</div>
<!-- content needs to be placed after rightbar -->
<div id="content">contents</div>
Once you resize too small, the percentages width will be smaller than the text content within your element. The browser cannot concatenate words, so the element is forced to have a min-width. Try putting the elements in a wrapper with an assigned min-width.
Between these two bars you have a space of 3%. 3% of 1000px is 30px. 3% of 2000px is 60px. Therefore if you right element is floating right, it makes sense you'll see that additional space. Try floating the element left.