I have to divs floated, one is on the left, the other on the right. What i want to do (without js) is that the right div fills the available space (width: 100%). The problem is, that the left div has an dynamic width, else I could simply use margin-left.
I also tried display: table-cell; but that won't allow me to use margin, only border-spacing.
Any suggestion?
You can probably do it like this, works in IE8 and better, in FF, in Safari. You could use padding instead of margin, as in this example:
<style>
.c_0 {
display: table;
width: 100%;
border: 4px solid orange;
}
.c_1 {
display: table-cell;
width: 20%;
border: 1px solid red;
padding-right: 20px;
}
.c_2 {
display: table-cell;
border: 1px solid blue;
}
</style>
<div class="c_0">
<div class="c_1">
has a width and padding instead of margin
</div>
<div class="c_2">
has the rest
</div>
</div>
EDIT
This only works with "%" on the first row. I saw it too late, that you want pixels.
Related
When I put width with % I lose 1px in some value.
Here's a fiddle
HTML:
<div class="div_centent " >
<div class="ligne_inscription" >
<div class="label_inscription">Email :</div>
</div>
</div>
CSS:
.div_centent {
width: 49%; /***** here the problem *****/
border: 1px solid #8096c4;
}
.ligne_inscription {
display: table;
width: 100%;
background-color: black;
}
.label_inscription {
display: table-cell;
}
With width: 49%; or width: 52%; I lose 1px, with width: 49%; and width: 50%; or a numerique vaue like width: 100px; it's okay.
Can somebody explain why?
P.S I want a explanation not to change the display from table to block because the problem is in the div with display: table not in the div where i put width: 49%; because with display: block it's okey
I think this is a rounding problem/bug with the display:table implementation.
I just looked it up on chrome and while defining width, it doesn't round down the number but when reading it for the child element it does round it down.
You'll see that the parent is 241.5625 pixels
While the child is 241px.
Don't know if having the border on the wrapper div is crucial but moving the border to the table one should solve the problem.
Some browsers will not do 50% + 50% = 100% width.
I believe it is because decimal values for pixels are rounded.
Very silly example, but for a 3px box, the browser may determine that the two halves should be 2px each so the total would be 4px.
dellchange
CSS
.ligne_inscription {
display: run-in; /**add**/
width: 100%;
background-color: black;
}
I searched for this but I can't seem to find a similar case that had an answer to it. Sorry if it has been addressed previously.
I have a section of a html page that looks, on a basic level, like this:
<div id=wrap>
<div id=lb>
Content
</div>
<div id=rb>
Content
</div>
</div>
These basically break up my body into a left section (LB) and a right section (RB).
With corresponding CSS (Not showing a CSS Reset, but a generic one is in use as well; ... indicate other code is present but N/A):
#bwrap {
width: 100%;
height: 400px;
display:inline-table;
...
}
#lb {
width: 71.5%;
display: table-cell;
...
}
#rb {
width: 28.5%;
display: table-cell;
padding: 30px 6px 7px 6px;
border-left: 1px #6A6A6A solid;
border-right: 1px #6A6A6A solid;
}
I started right to left and filled in content in #RB; everything was perfect. However as soon as I started working in #LB I noticed that all my content within #RB shifted down to line up with the bottom of #LB's content. Even though the content nor the DIV overlaps.
The specific content that did this was a google calendar embed into #LB.
Everything looks completely normal except the shift down in #RB.
Anyone know where I went wrong? I tried to mess with floats and absolute positioning but none of it had any effect, most of it actually made the situation worse.
Use this
vertical-align: top;
Live example http://jsfiddle.net/wfyVy/
It's jumping down because the extra padding and border you have defined to rb is adding to the overall width of the container, making it no longer 28.5%. Try this:
#lb {
width: 70%;
display: table-cell;
...
}
#rb {
width: 20%;
display: table-cell;
padding: 30px 6px 7px 6px;
border-left: 1px #6A6A6A solid;
border-right: 1px #6A6A6A solid;
oveflow:hidden;
}
Update: if changing it to the css above is not enough, try adding a float: left to both ids above.
When you use paddings in elements with width % values, the paddings adds to the width value. Try reducing a little bit the width to get a correct proportion.
Don't use display: table-cell, it's ugly and doesn't work consistently on all browsers, You should be able to do fine with floats and widths.
Also using padding or margins on the same element as an element that has a width defined is not a good idea, again browser incompatibilities make it a nightmare to work with.
I suggest you do something like:
<div id="wrap">
<div id="lb">
content
</div>
<div id="rb">
<div id="rp">
more content
</div>
</div>
</div>
with css:
#wrap {
width: 100%;
height: 400px;
display: block;
...
}
#lb {
width: 71.5%;
display: inline; //not actually necessary
float: left;
...
}
#rb {
width: 28.5%;
display: inline; //again not necessary
float: right;
}
#rp{
border-left: 1px #6A6A6A solid;
border-right: 1px #6A6A6A solid;
padding: 30px 6px 7px 6px;
}
Here's what I'm working with:
<div id="parentDiv">
<div id="labelDiv"></div>
<div class="contentDiv"></div>
<div class="contentDiv"></div>
<div class="contentDiv"></div>
<!-- ... -->
</div>
labelDiv is always a fixed size. In this case, 30px. parentDiv is set to a width of 75%. There can be 1 to any number of contentDiv. What I want is to evenly space out the contentDiv objects. I'm trying to do this all in CSS (2.1, if possible). I was able to write a quick jQuery function to equally space out the divs, but I don't feel like its the best solution.
Any ideas?
display: table; table-layout: fixed can do this.
This is all CSS 2.1 as requested, but check the browser support - it works everywhere except IE6/7.
See: http://jsfiddle.net/thirtydot/Ec8Tw/
CSS:
#parentDiv {
display: table;
table-layout: fixed;
width: 75%;
height: 100px;
border: 1px solid #444
}
#parentDiv > div {
display: table-cell;
border: 1px dashed #f0f
}
#labelDiv {
width: 30px;
background: #ccc
}
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.