I've got a few divs (multi-column page) with "display: inline-block" set. Shouldn't this prevent them from wrapping? I want them all side by side:
div.LabelColumn
{
display: inline-block;
padding: 10px 0 0 40px;
vertical-align: top;
}
div.DataColumn
{
display: inline-block;
padding: 10px 0 0 5px;
vertical-align: top;
}
To clarify, I want the DIVs side by side – i.e., shown as columns. I want them each to take up as much room as they need. Each of them, using what I want to display, should only take up about 100px, so there is easily enough room to display a few columns side by side. The first column will have a label, the second a bit of data, the third a label, and the fourth a bit of data.
To give a higher level view of the page, I have a div which I am floating left. To its right, I want the multiple columns of data. By the way, this is working in Chrome, but not in IE.
I would like the width to automatically adjust to be as wide as the text in the DIV, if possible.
Remove inline block, use floating, assign width, and padding margin.Here is the demo
Using inline-block does not prevent elements from wrapping. In fact, when applied to div elements it will do the opposite.
use float. for more information: http://css-tricks.com/all-about-floats/
If you want them all side by side, their containing element needs to have enough width to allow so. You can prevent wrapping causing breaks within the elements by applying whitespace: nowrap;, but this may have other effects depending on how you've structured your markup.
Related
Please correct me if this question has already been stated on stackoverflow! I apologize dearly if it has but I've been looking for a while and have only found hows not whys.
My question is this: Parent divs seem to automatically take up the full width of the page unless { display: inline-block; }is specified for it. When it is specified, it then adjusts it's width according to the width of it's child element. This really comes in handy, but I feel that it's important for me to know why this is happening. Here is some code for visual representation. Thanks in advance!
Edit: I see that some people have marked my question as a duplicate, but please show me where in the other question it explains why display inline-block automatically adjusts to it's children's height and width. Thank you!
#wrapper {
border: 1px solid black;
display: inline-block;
}
#child_div {
height: 100px;
width: 100px;
border: 1px solid black;
margin: 10px;
}
<div id="wrapper">
<div id="child_div"></div>
</div>
display: inline-block is basically a sweet-spot between display: inline; (which is default for span, strong, em, etc.) and display: block; (which is default for div, p, etc).
Inline elements are built for text and thus they should flow inline with the text, and only be as wide as the text they contain. Thus, you can't set the width of an inline element.
Block elements are made to fill all the available width by default and are thus on their own line rather than flowing inline. This is good for things like paragraphs, but sometimes you want shorter lines so it is possible to adjust the width for block elements.
Inline-block elements are in the middle. They flow inline like display: inline; elements, but you can set the width like display: block; elements.
The reason an inline-block defaults to a shrink-to-fit width is because if it didn't, then you wouldn't be able to place more than one inline-block on the same line, because every inline-block would then insist on occupying the entire width of its line box, leaving no room for any other inline-level boxes and thereby defeating the purpose of having an inline-level block container box (which is how "inline-block" is defined in the spec).
The reason a block box defaults to filling its containing block horizontally is because block boxes are stacked vertically in normal flow, with inline content flowing within inline formatting contexts established by them. There needs to be room for this inline content to flow, and room is provided by having block boxes fill their containing block horizontally.
See also:
What is the difference between block and inline-block with width: 100%?
Why doesn't "margin: auto" center an element vertically?
The default value for width and height is auto that is calculated by
the browser.
In your case width of the wrapper div is not specified( taken as auto) and it is display: inline-block( height/width can be set) so its width is calculated by the browser with respect to its child element's width(child_div).
I would say there is a W3C specification for the property display:
Here some documentation from MDN:
https://developer.mozilla.org/de/docs/Web/CSS/display
Here is the W3C specification:
https://www.w3.org/TR/css-display-3/
And to answer your: Why?
There is a layout engine behind the CSS written in C++ in the browser. Normally the elements don't behave like you know from CSS. The people from the browser need to say where to draw these elements and the lines and how the elements should behave, therefore all these properties like:
display: block | inline-block or
position: static | relative | absolute | static etc.
So the engine knows how to draw all the lines the user will finally see in the browser window.
Here are more details about this:
https://www.w3.org/TR/CSS2/visuren.html
I hope this was your question and I could help you to enlighten a little bit more about this.
I am able to center horizontal list with text-align:center, but I wonder how can I keep it centered inside container, but has rows aligned left.
My container has percent width, so I need it working when resizing window and blocks are reordering
Please check the sample image below to understand my problem:
UPDATE:
Please find JsFiddle as per request
I need to center my <ul> inside div.container
Use this:
ul {
margin: auto;
}
li {
float: left;
}
See this fiddle:
You already know to center the <ul> with margin: auto;
The key is to adjust the <li> within it.
You can do that by using float: left;
Alternatively: you can set display: inline-block;
Both have a similar effect, but aren't identical. Play w/it.
By providing margins & percentage widths, you can play w/size and separation of the elements.
Since these are all block-level elements, they'll stack up & wrap automatically.
By floating or changing display of the <li> you keep them left-aligned within their parent element (the <ul>).
Also, by using separate CSS classes instead of targeting the <li> element directly, you leave things flexible in case you want to have a right-aligned list, or some other options later.
Wrap your boxes within another div.
You can then center that div with display: block; margin: 0 auto;, while keeping the boxes left-aligned.
I am trying to put two divs side by side by using inline-block. For some reason, I am seeing a large empty space at one of the divs.
I have created a pen at http://codepen.io/weima/pen/eKEbD
The problematic div is the one with class .input-area. The empty space is gone if I remove display:inline-block from .input-area css, but then I wont be able to put these two divs side by side.
Is there anyway to solve this without using float?
You could add vertical-align:top to the element in order to fix the alignment issues.
UPDATED EXAMPLE HERE
.input-area {
vertical-align: top;
display: inline-block;
width: 450px;
border: 1px solid green;
}
The default value to the vertical-align property is baseline. If you are curious as to what this does, take a look at this answer.
I have two divs. One that is floated left and one floated right. The one of the left has a width set to 18% and a min-width of 217px. I want to have the div on the right take up the remaining space, while also being able to resize to fit the window.
The problem I am having is that I can set the right div's width to 82% and to float right, which works until I make the window side too small, in which case the min-width of the left div kicks in and it stops shrinking. The right div doesn't have enough space to fit, so it is pushed down.
Here's some sample code.
HTML
<div id="div1">
stuff inside of it
</div>
<div id="div2">
stuff inside of it
</div>
CSS
#div1
{
float: left;
width: 18%;
height: 100vh;
min-width: 130px;
box-shadow: 0px .3em .2em #000;
z-index: 2;
}
#div2
{
width: 82%;
float: right;
z-index: 1;
}
So this is where I'm stuck, how should I approach fixing div2? I've tried using a table instead of divs, but a border appeared around the cells that I couldn't change and it removed my box-shadow, so I would prefer a solution without it.
Your thinking of using tables is somewhat on the right track, as table elements do actually have many properties that make them capable of such a thing, but as people are pointing out in the comments, it's no longer a valid approach to use table elements for the purposes of layout for non-tabular data.
This is why CSS implemented a set of style rules built to reflect those unique properties. You can set a container around two elements with the style display: table;, and then give it's children the style display: table-cell;
Setting the width for the right side div to 100% will ensure it always fills as much space as is available to it.
But, since table cells can't break to a new row when the content exceeds the width of the table, it will automatically adjust to fit. So when another div (the left one) has a specific min-width, the div on the right is given less space in order to keep the cells contained.
Here's an example using your code:
http://jsfiddle.net/Q5rjL/
CSS table display properties give you all the benefits of these unique elements, but without the semantic issues. They are great for complex layouts where other style display types fall short.
You can also contain floats with overflow:hidden:
#div2{
overflow:hidden;
z-index: 1;
}
The DIV will fill up the remaining space (http://jsfiddle.net/MAjwt/)
I feel like CSS is much harder and confusing than C++ therefore I have few questions.
Consider following html body
<div id="mydiv1">12345~~~~~~~~/</div><div id="mydiv2">+_______67890</div>
And CSS
#mydiv1 {
float: left;
background-color: red;
margin-right: -30px;
}
#mydiv2 {
float: left;
background-color: blue;
}
which looks like this (in my latest Chrome)
which makes sense to me because second div is floating and it floats over first div.
On the other hand if I remove float property from mydiv2 only content moves but background box stays in the same place.
1) Could you please explain why ?
Now I'll remove margin and float, and add width to both divs making having CSS
#mydiv1 {
background-color: red;
width: 220px;
}
#mydiv2 {
background-color: blue;
width: 240px;
}
It will expectantly look like this
But if I add float: left to #mydiv1 it suddenly looks like this
2) Why did second div become twice as high ? I checked it by setting z-index of first div to -1.
PS. I've done tutorials on CodeAcademy and read float/margin-related articles on smashingmagazine.com. Sadly it didn't made everything crystal clear. If you guys can suggest online resources or book that would have explained these questions to me I'll appreciate it a lot.
<div> is a block-level element so it naturally fills the width of the container it's in. It makes its neighboring elements go above/below it, but not beside it.
Now, when you apply float to a block-level element, it no longer fills the width of the container, its width will be that of its contents. It also loses the ability to force its neighbors to go above/below it.
Note:The tricky bit is that the container holding the floated elements will not have a proper height because the floated elements are no longer part of the regular flow of content. (Here's how to get around it: http://www.quirksmode.org/css/clearing.html)
Regarding the last part of your question, if a floated element, eg. #mydiv1, is beside a block-level, eg. #mydiv2, then the block-level element wraps or flows around the floated element. It's one of the ways people can get text to wrap around an image in a news article.
When you remove the float from div2 it goes behind the floated div1, because floated elements does not take any height from it's content. You can say it's going out of the vertical flow of elements. However, it still take horizontal space from content. So the result is as expected here, once you "know the rules".
This should also explain the double height in your other example.
Here is a great article from css-tricks.com
I hope that helps!
If we don't give either float or width to any block level element like div then it occupies the entire width of the container.
Instead of float you can give some width and display: inline-block. This display property will display content inline and behaves like a block level element.