I have three divs (or any other block element): div1 is the parent, div2 and div3 are the two children. Both div2 and div3 have a fixed width. What is the necessary CSS to display div2 and div3 evenly distributed, horizontally, within div1? As in the image, I want the value of x to be equal for all three distances. I do not want to hard-code the positions of div2 and div3.
You can see a JSFiddle of my attempt here: http://jsfiddle.net/pUv85/. However, this seems to place the divs on top of each other.
Note that I want to be able to achieve this without specifying the margins explicitly. In the same way that with just one div, I could set the left and right margins to auto, I'm wondering whether there is a similar approach with two divs.
You haven't really specified a lot in your question, so I have no reason to assume that the following wouldn't work for you.
So just add equal margins to both sides of div2, then set the same margin for div3 but only on the right side, and apply float:left to both. Of course you'll have to be sure that div1 is bigger than these.
You may choose to use percentages to better fit your needs, depending on the rest of your code.
#div2 {
margin-left: 10px; /* or you could set this to any unit you want */
margin-right: 10px /* should be the same amount as above */
float:left;
}
#div3 {
margin-right: 10px /* again, should be the same amount as above */
float:left;
}
I updated your fiddle that you kindly provided just now: http://jsfiddle.net/7VQRG/1/
EDITED: Here is a jQuery way to do the margin calculation automatically - it even has an input to the right of the black box where you can specify a different width for your divs: http://jsfiddle.net/7VQRG/2/
Related
If you look at the CSS box model spec, you'll observe the following:
The [margin] percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1. (emphasis mine)
This is indeed true. But why? What on earth would compel anyone to design it this way? It's easy to think of scenarios where you want, e.g. a certain thing to always be 25% down from the top of the page, but it's hard to come up with any reason why you would want vertical padding to be relative to the horizontal size of the parent.
Here's an example of the phenomenon I'm referring to:
<div style="border: 1px solid red; margin: 0; padding: 0; width: 200px; height: 800px;">
This div is 200x800.
<div style="border: 1px solid blue; margin: 10% 0 0 10%;">
This div has top-margin of 10% and left-margin of 10% with respect to its parent.
</div>
</div>
http://jsfiddle.net/8JDYD/
Transferring my comment to an answer, because it makes logical sense. However, please note that this is unfounded conjecture. The actual reasoning of why the spec is written this way is still, technically, unknown.
Element height is defined by the height of the
children. If an element has padding-top: 10% (relative to parent
height), that is going to affect the height of the parent. Since the
height of the child is dependent on the height of the parent, and the
height of the parent is dependent on the height of the child, we'll
either have inaccurate height, or an infinite loop. Sure, this only
affects the case where offset parent === parent, but still. It's an
odd case that is difficult to resolve.
Update: The last couple sentences may not be entirely accurate. The height of the leaf element (child with no children) has an effect on the height of all elements above it, so this affects many different situations.
For "n%" margin (and padding) to be the same for margin-top/margin-right/margin-bottom/margin-left, all four have to be relative to the same base. If top/bottom used a different base than left/right', then "n%" margin (and padding) wouldn't mean the same thing on all four sides.
(Also note having the top/bottom margin relative to the width enables a weird CSS hack that allows you to specify a box with an unchanging aspect ratio ...even if the box is rescaled.)
I vote for the answer from #ChuckKollars after playing with this JSFiddle (on Chrome 46.0.2490.86) and referring to this post (written in Chinese).
A major reason against the infinite calculation conjecture is that: using width faces the same infinite calculation problem.
Have a look at this JSFiddle, the parent display is inline-block, which is eligible to define margin/padding on it. The child has margin value 20%. If we follow the infinite calculation conjecture:
The width of the child depends on the parent
The width of the parent depends on the child
But as a result, Chrome stops the calculation somewhere, resulting:
If you try to expand the "result" panel horizontally on the JSFiddle, you will find that the width of them will not change. Please note that the content in the child is wrapped into two lines (not, say, one line), why? I guess Chrome just hard-code it somewhere. If you edit the child content to make it more (JSFiddle), you will find that as long as there is extra space horizontally, Chrome keeps the content two lines.
So we can see: there is some way to prevent the infinite calculation.
I agree with the conjecture that: this design is just to keep the four margin/padding values based on the same measure.
this post (written in Chinese) also proposes another reason is that: it is because of the orientation of reading/typeset. We read from top to down, with the width fixed and height infinite (virtually).
I realize the OP is asking why the CSS specification defines top/bottom margin percentages as a % of width (and not, as would be assumed, height), but I thought it might also be useful to post a potential solution.
Most modern browsers support vw and vh now which lets you specify margin numbers against the viewport width and viewport height.
100vw/100vh equals 100% width/100% height (respectively) if there's no scrollbar; if there is a scrollbar the viewport numbers don't account for this (while the % numbers do). Thankfully, nearly all browsers use scrollbar sizes of 17px (see here), so you can use css calc function to account for this. If you don't know whether a scrollbar will appear or not, then this solution will not work.
For example: Assuming no horizontal scrollbar, a top margin of 50% of height, could be defined as "margin-top: 50vh;". With a horizontal scrollbar, this could be defined as "margin-top: calc(0.5 * (100vh - 17px));" (remember that the minus and plus operators in calc require spaces on both sides!).
I know this question is a bit old, but I'd like to refresh it for CSS3. While it's true that the CSS2.1 specification says that percentage padding and margin are defined relative to the width of the containing block, this is not always the case. It depends on the writing mode. This comes straight from the CSS3 specs:
As a corollary, percentages on the margin and padding properties, which are always calculated with respect to the containing block width in CSS2.1, are calculated with respect to the inline size of the containing block in CSS3.
I cover this in my tutorial on aspect ratios with CSS.
Specifically, there's a section on Percentage Padding in Horizontal vs. Vertical Writing Modes. By default, an element has a horizontal writing mode, where text flows horizontally (in the "inline" direction) from left to right. However, using the writing-mode CSS property, you can actually set the mode to be vertical (with text either flowing from right to left or left to right). Here are some diagrams of horizontal vs vertical writing modes:
These are taken from the MDN docs on writing modes.
In vertical writing modes, percentage padding will be relative to the height of the containing block, not to the width.
Here's proof:
.document {
writing-mode: vertical-rl;
width: 100%;
height: 100vh;
}
.parent {
width: 100%;
height: 200px;
background-color: black;
color: white;
}
.child {
padding: 10%;
background-color: white;
color: black;
border: solid 1px;
}
<div class="document">
<div class="parent">
<div class="child">
Child
</div>
</div>
</div>
The child gets 20px of padding, which is 10% of its containing block's height (200px).
As to the why in the question, this was covered well in the other posts here.
I am trying trying to make a div's width as wide as it's content. Here's a fidle to show what I mean:
http://jsfiddle.net/djxpU/
I want the blue area to be as wide as the white. I tried float:left and display:inline-block, however they won't work with position:absolute;. Any workarounds?
If you want the white area to fit the blue parent, you'd set the width of the white to 100% #X{
width:100%;
}
Block-level elements actually do this naturally. The problem you have is, absolute positioned elements are taken out of the normal flow, so the block can't wrap around your white boxes.
Is there a reason you need them positioned absolute?
EDIT: If you just wanted the white boxes to be centered, here you go: http://jsfiddle.net/Marconius/djxpU/1/
Code (because I have to): margin: 0 auto;
By default a div will be the width of its parent and will display as block. Here is an example of the divs filling the available space while still maintaining the left margin.
Apply this to your 'X' divs: { margin-left: 120px; height: 40px; background-color: white;}
http://jsfiddle.net/yz3Dk/
Here is jsfiddle example
Here is the code..
<div id="xxx1">
<div class="xxx1">
txt
</div> </div>
And CSS
#xxx1{
border:1px solid black;
min-height:25px;
}
.xxx1{
border:1px solid green;
height:50px;
position:relative;
top:-50px;
}
I want to remove extra space from div id "xxx1". How to do that? And I cannot use fixed height cause I want that div to increase its height if I want to add some more data inside that div.
Here is jsfiddle example
Provided I understood the question, get rid of padding on body.
jsFiddle
body {
margin:0;
}
You may also find box-sizing:border-box useful which integrates border and padding into width and height
jsFiddle
#xxx1{
box-sizing: border-box;
}
.xxx1{
box-sizing: border-box;
}
Edit
RE: no.. I want to remove blank space inside div id "xxx1".
Well you can do that in a variety of ways, the right way would depend on what the context is. Here are a couple:
Position .xxx1 using position:absolute so it's taken out of the flow of the page. jsFiddle
Set height:0px and set it with JavaScript when you add content to it.
Here try to change it like this
.xxx1{
border:1px solid green;
height:auto;
position:relative;
}
you cant remove the spacing added by relative positioning. setting the padding and margin on the body wont do it. setting the box-sizing wont do it. setting the font size to 0 wont do it. doing something with javascript is just silly.
You have these options:
make the next item have a negative margin (ick).
float the item, tho this wont allow overlapping (if you need that)
set the outer div to a relative position and the item you want to move to absolute position (and set the top (or bottom) and left (or right) values. this positions the item you want to move according to its outer div (not the window).
Number 3 is almost always the best way to go. Think about how the page will change with variable content to make sure you choose the right option (and correct corner to position from).
If the outer div that you set to a relative position is not adjusted in space (using top/bottom/left/right), then that div does not have any extra unwanted space. If you need to adjust the outer div AND the inner div, set all moving divs as absolute, and the closest parent as relative; the movement (top/bottom/right/left) will be based on that relative parent.
I currently have two columns, with another column in-between them. What I want is to have the left and right columns extend in height as the centre column has more content added to it.
Something to note is that I cannot set an exact height for the parent div and then have the left and right columns set to "height: 100%". This is because there could be only a small amount of content in the centre column, or a lot.
It looks like you're going to have to implement a Javascript approach. The way I would go about it would be to grab the height of .legs then apply it to .flight_no and .price.
The only other option I can think of would be to "fake it" by giving .flight a background image that would include however your left and right columns are stylistically different, then repeat-y in your CSS. If you do that, the sidebars wouldn't actually have to span the same height.
Something like this, using jQuery, will dynamically set your sidebars to the height of the middle column.
$(document).ready(function() {
$(".flight_no, .price").css("height", $(".legs").height());
});
Edit:
Times have changed -- jQuery is not the juggernaut it once was, and we welcomed Flexbox to the world. See this SO page for column-based solutions:
CSS - Equal Height Columns?
Extending div to correct height, or lets say 100% height of the container, You have to chain height:100% up to the container with fixed height or to the body with another height: 100%;. On the long run, you will probably require this solution.
Since there is no fixed height, I used height: 100% and chained up to the body an html.
body, html { height: 100%; }
.flight
{
float: right;
border: 1px solid green;
height: 100%;
}
Demo
TO give exact height of container to the sidebars, you either have to use fixed height or use javascript.
So most of this site so far uses auto centering (the container and nav have margin-left/right:auto) and things seem to go all well and dandy except for the footer.
When I resize the size of the window everything is filled nicely except when I scroll horizontally the footer seems to be cut off on the right side.I've read that this may be a browser bug. Though it occurs in IE and chrome and firefox so it could just be sloppy coding (I am a big newb).
Here is the css:
#footer {
background-image:url(../Images/footer_bg.jpg);
color: white;
height:300px;
padding-top:20px;
}
/*I have 4 headings with Ps that I want to display horizontally side by side*/
#footerContent{
min-width:1000px;
}
/*So I tried floating <li> inside <ul> and limiting its width, which worked fine */
#footerContent ul{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#footerContent li {float:left; width:250px; }
Just to reiterate it works fine when the browser is full screened or resized. But after you resize and you use the horizantal scrollbar to scroll all the way right then the background image is cut off.
I've tried width:100%, min-width, width:1000px; but none of those seemed to work.
http://postimage.org/image/3so264fnb/
Regarding your comment about Stackoverflow being similar
(at least as of 4-29-2012)
The issue on stackoverflow seems to be that the footer contains another div element, footerwrap, that has a width: 960px set to it, but footer itself has no width setting. A div is basically designed to simply "group" block level content. It is a common misconception that a div expands with it's content. Actually, a div expands to its parent if an explicit width is set on a parent. If there is none, then it fits the browser window. This is what you (and stackoverflow) is experiencing.
To get the div to relate to the content width, you must either:
Explicitly set the width or min-width of the container. So, if stackoverflow set a min-width: 990px (the 960px of the footerwrap + the padding of 15px on each side) on the footer that wraps footerwrap, then its problem is solved.
Set the container div to float, as a floated element wraps its content.
Take a look at this example fiddle. Note the first two div's experience the same issue you are seeing. If you shrink or expand the size of the iframe window in the fiddle, the first two div's will contract or enlarge with it, but still leave blank space on the horizontal scroll. The third and fourth div's have had my fixes above applied. The fifth div is to show the fact that the inner div, if not defined in width, will expand to the width of a container that has an explicit width set.
As a side note, it may work (I have not tested in many browsers, but FF 11 worked) to actually just add a float: left to the body element in those cases where the body does not have a set width. As this example shows, it seems to be effective in causing the first two div's to behave just like the 3rd and 4th divs.
I hope this helps.
Original Answer
It is a little unclear what can be done because there is some information lacking. Here are some things to look for:
Is your background-image wide enough (or can it / should it have a background-repeat: repeat-x applied to make it wider if needed)?
Does your footer width (1000px) match your upper content width? If footer is constrained narrower than what the upper content area (or header, etc.) is allowed to be, then it's background will not align.
That's the best I can do without seeing more of your html and css for the page, and not knowing the size of the image and your intention for how it is to function.