I have a container with 3 children elements.
<div class="container">
<img />
<div class="element1"></div>
<div class="element2 bottom"></div>
</div>
They must be positioned as shown on the diagram below:
image is in the top of the left column and nothing goes below it (it is the only element in the left column)
element1 is in the top of the right column
element2 is stick to the bottom of the right column (and must not collide with the element1 which is above it)
Does somebody know how to achieve such layout using pure CSS? Ideally I wouldn't like to add any markup, but I can do that if that's the only possible way.
The biggest problem I'm facing here is how to stick that second element (non-image) to the bottom of the container without removing it from the flow. Because if I use position: absolute and remove it from the flow, the elment above it can collide with it (both elements have unknown height).
Here's a pen to work on: http://codepen.io/anon/pen/yNwGvQ
I would suggest you to use two columns in your html and then use the property display: flex; for your right column as suggested in the article A Complete Guide to Flexbox.
http://codepen.io/AlexisBertin/pen/QboYyY
All the HTML:
<div class="container">
<div class="column column-left">
<div class="image">This is an image</div>
</div>
<div class="column column-right">
<div class="element1">This container has dynamic content so it's height is unknown and may change.<br/><br/> Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger.</div>
<div class="element2">This container also has dynamic content so it's height is unknown and may change</div>
</div>
</div>
Part of this CSS:
.column {
float: left;
height: 100%;
}
.column.column-left { width: 100px; }
.column.column-right {
width: calc(100% - 100px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
Hope you get the idea. Good Luck'.
EDIT:
The easiest way to achieve this without declaring height to the container seems to only create a third parent div to the first block of the second column and define it as flex: 1; while the second block of this same second column would be define as flex: 0;.
http://codepen.io/anon/pen/yNwZmJ
More details explained in the comments.
The easiest solution I figured out is this one:
First you create this CSS:
.container {
width: 400px;
padding: 10px;
border: 1px solid red;
background-color: white;
}
.container > img {
float: left;
}
.container > div {
position: relative;
overflow: auto;
padding-left: 5px;
min-height: 120px;
}
.container > div > .bottom{
position: absolute;
bottom: 0;
display: block;
}
And then use these divs, depending on your content. The first one you use when you know your text is short:
<div class="container">
<img src="http://placehold.it/120x120">
<div>
<div>
<p>This container has dynamic content so it's height is unknown and may change.</p>
</div>
<div class="bottom">
<p>This container also has dynamic content so it's height is unknown and may change</div>
</div>
</div>
The second one you use when you know your text is long
<div class="container">
<img src="http://placehold.it/120x120">
<div>
<div>
<p>This container has dynamic content so it's height is unknown and may change.</p>
<p>Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger.</p>
</div>
<div>
<p>This container also has dynamic content so it's height is unknown and may change</p>
</div>
</div>
</div>
The difference is that you remove bottom class from the last div in your div that has long text.
Also in your CSS you can see .container > div{... min-height: 120px; ...}, you should set it to height of your image. In case you want the bottom text more down then you have to increase min-height to be bigger than your image height.
Here is it in action: http://codepen.io/anon/pen/YXgBXx
I am using the awesome Select2 jQuery plugin.
Currently I have a fixed-width div floating to the left of a fluid-width div, this works well:
<div class="row">
<div class="col left">Label</div>
<div class="col right"></div>
</div>
.row {
display: table;
}
.col {
display: table-cell;
}
.col.left {
width: 150px
}
But it doesn't work so well when I add a select2 box inside the fluid right div. Now it becomes clear that the fluid right div is not actually 100% width, it adapts to the width of its content, and as a result the select2box also changes size constantly:
<div class="row">
<div class="col left">Label</div>
<div class="col right"><select style="width: 100%" class="select2">
Here is a JSFiddle demonstrating the problem: http://jsfiddle.net/vfa4831b/4/
How can I make the .right fluid-width div adapt to the width available, and stay at that size?
Adding width: 100%; to .col.right makes the div 100% width, but also overflows the boundaries of .row.
UPDATE: I need IE8 support, unfortunately, so can't just use calc.
Try this:
.row {
display: table;
width: 100%;
background: #ccc;
}
Your row that uses display: table wasn't actually being set to be 100%.
I know this isn't exactly a new topic but all my researches were without a result.
What I try to accomplish:
Two divs inside one div, next to each other. (easy: float, inline-block)
If the browser window is to small the divs should stay next to each other.
What happens right now:
If the browser window is not wide enough, the second div slips under the first one.
Example: http://pastebin.com/e9cuWjwT
How can I solve that?
If you add width to the container surrounding your divs, they will stay next to each other even if the screen real estate gets smaller. Because you've told the browser how big you want container to be, resizing the screen won't affect their placement.
Here's is a fiddle with very simplified code to show a scenario that works:
http://jsfiddle.net/Lera/CmJhw/1/
CSS:
.wrapper {
width:1024px;
}
div {
display: inline-block;
}
HTML:
<div class="wrapper">
<div>First Div</div>
<div>Second Div</div>
</div>
You could try something like:
HTML:
<div>
<div class="selection">Menu 1</div>
<div class="selection">Menu 2</div>
<div class="selection">Menu 3</div>
<div>
CSS:
div {
border: 1px solid #CCC;
display: table;
width: 100%; /* set to what you need */
}
div > div {
display: table-cell;
vertical-align: top;
}
The table cells will always stay in a single row and their widths will adjust as the width of the parent block (with display: table) adjusts to the width of the browser.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
I want to build a fluid layout using percentages for widths. Here is my HTML:
<div style="width:50%; display:inline-table;">A</div>
<div style="width:50%; display:inline-table;">B</div>
The problem is that the elements won't display together on one line. However, the layout works fine if I remove the line break between the them in the HTML:
<div style="width:50%; display:inline-table;">A</div><div style="width:50%; display:inline-table;">B</div>
What is the problem with the first HTML, above? How can I do something like that, but without using absolute position and float?
The problem is that when something is inline, every whitespace is treated as an actual space. So it will influence the width of the elements. I recommend using float or display: inline-block. (Just don't leave any whitespace between the divs).
Here is a demo:
div {
background: red;
}
div + div {
background: green;
}
<div style="width:50%; display:inline-block;">A</div><div style="width:50%; display:inline-block;">B</div>
The problem is that if you have a new line between them in the HTML, then you get a space between them when you use inline-table or inline-block
50% + 50% + that space > 100% and that's why the second one ends up below the first one
Solutions:
<div></div><div></div>
or
<div>
</div><div>
</div>
or
<div></div><!--
--><div></div>
The idea is not to have any kind of space between the first closing div tag and the second opening div tag in your HTML.
PS - I would also use inline-block instead of inline-table for this
Wrap them around a div with the following CSS
.div_wrapper{
white-space: nowrap;
}
Give this parent DIV font-size:0. Write like this:
<div style="font-size:0">
<div style="width:50%; display:inline-table;font-size:15px">A</div>
<div style="width:50%; display:inline-table;font-size:15px">B</div>
</div>
How can i do something like that but without using absolute position
and float?
Apart from using the inline-block approach (as mentioned in other answers) here are some other approaches:
1) CSS tables (FIDDLE)
.container {
display: table;
width: 100%;
}
.container div {
display: table-cell;
}
<div class="container">
<div>A</div>
<div>B</div>
</div>
2) Flexbox (FIDDLE)
.container {
display: flex;
}
.container div {
flex: 1;
}
<div class="container">
<div>A</div>
<div>B</div>
</div>
For a reference, this CSS-tricks post seems to sum up the various approaches to acheive this.
CSS Flexboxes
Simple modern solution. Better than HTML tables!
.container {
display: flex;
}
.container div {
flex: auto; /* also 1 or 50% */
}
<div class="container">
<div>A</div>
<div>B</div>
</div>
Alternative: CSS Grids
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* also 50% */
}
<div class="container">
<div>A</div>
<div>B</div>
</div>
<div id="wrapper" style="width: 400px">
<div id="left" style="float: left; width: 200px;">Left</div>
<div id="right" style="float: right; width: 200px;">Left</div>
<div style="clear: both;"></div>
</div>
I know this question wanted inline block, but try to view http://jsfiddle.net/N9mzE/1/ in IE 7 (the oldest browser supported where I work). The divs are not side by side.
OP said he did not want to use floats because he did not like them. Well...in my opinion, making good webpages that does not look weird in any browsers should be the maingoal, and you do this by using floats.
Honestly, I can see the problem. Floats are fantastic.
basically inline-table is for element table, I guess what you really need here is inline-block, if you have to use inline-table anyway, try it this way:
<div style="width:50%; display:inline-table;">A</div><!--
--><div style="width:50%; display:inline-table;">B</div>
Sorry but all the answers I see here are either hacky or fail if you sneeze a little harder.
If you use a table you can (if you wish) add a space between the divs, set borders, padding...
<table width="100%" cellspacing="0">
<tr>
<td style="width:50%;">A</td>
<td style="width:50%;">B</td>
</tr>
</table>
Check a more complete example here: http://jsfiddle.net/qPduw/5/
The problem you run into when setting width to 50% is the rounding of subpixels. If the width of your container is i.e. 99 pixels, a width of 50% can result in 2 containers of 50 pixels each.
Using float is probably easiest, and not such a bad idea. See this question for more details on how to fix the problem then.
If you don't want to use float, try using a width of 49%. This will work cross-browser as far as I know, but is not pixel-perfect..
html:
<div id="a">A</div>
<div id="b">B</div>
css:
#a, #b {
width: 49%;
display: inline-block;
}
#a {background-color: red;}
#b {background-color: blue;}
I have a absolutely position div that is overlapping a containers background due to it having a larger height. This div is sharing the container with a body div that's sitting happily to the left of it.
Is there a way to extend the container to be the height of the absolutely positioned div, rather than the body content?
Or should I just float the divs side by side and chuck a <div style="clear: both"></div> at the bottom of the two? Seems like a messy hack to get a container to extend :/
EDIT: Comments don't seem to like code structure. So I'll edit it into here as well.
The layout is:
<div id="content">
<div class="container">
<div id="header"></div>
<div id="main">
<div id="column-1"></div>
<div id="column-2"></div>
</div>
</div>
</div>
#content has a repeated background and #container sets the fixed width of the page. #header sits up to for the links and #main holds the two columns which have the main content for the page. I can't get those two columns to sit next to each other (float / absolutely) whilst having the #content's background repeat down below them
With this layout:
<div id="content">
<div class="container">
<div id="header"></div>
<div id="main">
<div id="column-1"></div>
<div id="column-2"></div>
</div>
</div>
</div>
your basic CSS should be something like:
html, body, div { margin: 0; padding: 0; border: 0 none; }
body, #content { height: 100%; }
#main { overflow: hidden; }
#column-1 { float: left; width: 300px; }
#column-2 { float: left; width: 600px; }
You said you wanted the background image appearing below the content. From this I assume you mean you want the page to be full screen height (minimum).
The point of absolute positioning is that it removes the element from the normal flow so no you can't have it's "container" extend to include it because technically it has no container.
Absolute positioning has its place but 9 times out of 10 I get better results with a float-based layout. But I can't really say more without more information.