What I'm attempting to do now, is creating a container (with floated elements) that adapts its width to the elements that fit..
The simplest example I can think of is this:
A container is filled with 300px * 300px floating divs. As long as the divs don't fill up a row, the width of the container (cleared both) is the same as the combined width of the divs, or 1 div = 300px, 2 divs = 600px and so on. However, if the divs don't fit on one row, they go on to the next and the width of the container remains at 100% even though the divs on the first row only take up (let's say) 95%.
Is there a pure CSS way of making that container no wider than its contents?
#main {
float: left;
background-color: #f00;
}
#main > :last-child:after {
clear: both;
}
.float {
width: 150px;
height: 150px;
float: left;
background-color: #00f;
}
<div id="main">
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
</div>
Here's a JSfiddle: http://jsfiddle.net/j9A6T/
Can you lose the red part to the right?
I have tried using the float/inline-block/table solutions on the container, but they won't work in this case.
Isn't it a case where a clearfix (to apply to your container div) would help?
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
More here : What is a clearfix?
Related
I am trying to add a div above my content div with the same width.
I would like it to only push down the content div, but it causes the sidebar div to move down as well.
<div id="container">
<div id="new-div">new div</div>
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div>
.
#container {
background: lightgrey;
width: 500px
}
#new-div {
background: darkred;
width: 300px
}
#content {
background: lightblue;
width: 300px;
height: 400px;
display: inline-block
}
#sidebar {
background: darkgreen;
width: 100px;
height: 400px;
float: right;
}
http://jsfiddle.net/zd9omqa7/2/
How can I avoid the sidebar div to move down? I would like it to always float in the right top corner.
The two easiest ways that spring to mind would be to either reorder the html so your sidebar comes first in the DOM:
http://jsfiddle.net/ctaylr/xxhdn1xb/1/
<div id="container">
<div id="sidebar">sidebar</div>
<div id="new-div">new div</div>
<div id="content">content</div>
</div>
or to use position absolute to brute-force move it to the top:
http://jsfiddle.net/ctaylr/warnjgp3/2/
(remember to position the container div relative for this to work)
Otherwise, you could look to wrap your left hand side "divs" in a container of its own.
Hope this helps!
I have 3 divs in my body: a container, a parent, and a child.
I'm trying to get the child to extend outside of its parent on the left side.
But if I do so with position: absolute, the parent will not stretch to the desired height...
position: static
position: absolute
Using a margin-left: -20px will not do either: ultimately, i'll have other nested parents, and need all the children to extend to the outer left.
Hers's my code so far:
#container {
position: absolute;
width: 300px;
}
.parent {
margin-left: 20px;
}
.child {
padding: 30px;
}
Any way to do this in pure css?
Edit: Here's my html code so you can see how the parents will be nested in each other:
<div id="container">
<div class="parent">
<div class="child"></div>
<div class="parent">
<div class="child"></div>
</div>
</div>
<div class="parent">
<div class="child"></div>
</div>
</div>
Edit 2: I have to point out there are multiple (infinite) levels of nesting in my code. The html sample above is just a fragment.
Why not simply use
Demo Fiddle
.child {
height: 60px;
position:relative;
left:-20px;
}
You can use position:relative to also justify content beyond the borders of a parent, so long as overflow:hidden isnt set on the parent.
Use this style:
.stretch-block {
position: relative;
left: 50%;
margin-left: -50vw;
width: 100vw;
}
It pushes the element to 50% width of the parent container from the left, then pulls it to the viewport's left edge with a negative margin that's 50% of viewport width. Then the element gets a width that's 100% of viewport width.
I'm trying to implement solution similar to provided here:
https://stackoverflow.com/a/12242226
The problem with it (for me) is that it does not allow to restrict height of inner div.
So I've updated solution as follows:
<style type='text/css'>
html, body {
height: 400px;
width: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 400px;
width: 100%;
background: yellow;
}
.component {
display: table-row;
background: gray;
}
.content {
display: table-cell; /* height is dynamic, and will expand... */
height: 100%; /* ...as content is added (won't scroll) */
background: turquoise;
}
.contentRel {
height: 100%;
background: blue;
position: relative;
}
.contentRemaining {
background: red;
position: absolute;
top:30px;
bottom:0;
left: 0;
right: 0;
overflow: auto;
}
</style>
<body>
<div class="wrapper">
<div class="component">
<h1>Component</h1>
<p>of variable height</p>
</div>
<div class="content">
<div class='contentRel'>
<div>100% Component Header</div>
<div class='contentRemaining'>
<div style='height:1000px'>
100% Component Content
</div>
</div>
</div>
</div>
<div class="component">
<h3>Other</h3>
<p>componet of variable height</p>
</div>
</div>
</body>
http://jsfiddle.net/UrcV7/
It works as I need in FF (height of contentRel div is set to 320px - height of wrapper div minus sum of heights of component divs), but doesn't work in IE: height of (contentRel div is set to 400px - same as height of wrapper div).
Does anybody know how to fix it?
Here is my problem description (maybe it is another solution for it):
I have an outer div with height set to some px values (wrapper div in example).
In that div I have several other divs which can be hidden dynamically by some JS code.
All divs except of 1 has some height. though it is unknown to me (component divs in example).
I want that one remaining div (content div in example) to:
a. Use all remaining height of wrapper div
b. Have a header of some predefined height (100% Component Header part in example above)
c. Have a child div with height "100% of content div" - "height of header" (100% Component Content in example above)
d. To not to be taller than "height of wrapper div minus sum of heights of component divs" (scrollbars are ok)
Consider the fallowing example:
http://jsfiddle.net/swLyX/
With the fallowing HTML:
<div id="container">
<p> Some text aligned the same as the below set of images
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<p> And some other text
</div>
And CSS:
#container {
width: 299px;
background-color: #c55;
}
.inner {
float: left;
margin: 20px 40px 20px 0;
width: 60px;
height: 60px;
background-color: black;
}
p{
clear: both;
}
The issue at hand is the large empty space at the right side of the second div because the margin of the third div throws it over to the next row.
Has one red div containing some text and three smaller divs floated to the left with a margin to the top, left and bottom to keep the other elements at a distance. In a real setting imagine that the red div is the container of a blog post and adjusts the margin to the other content and that the three black divs are images.
The important thing is that both the text and the first black div should be horizontally aligned to the left. Is there any way to make the right margin of the third div not throw it onto the second row without changing the sizes of the margin between the divs or breaking the alignment of the elements?
If the goal is to have any number of items accommodate any number of parent container widths, then with CSS, alone, there's no easy way to figure out what are the 'right-most' elements.
What I would suggest doing is this:
http://jsbin.com/uvegef/1/edit
html:
<div id="outerWrapper">
<div id="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
css:
#outerWrapper {
background: pink;
width: 89px;
overflow: hidden;
}
#wrapper {
width: 110%;
}
.item {
float: left;
background: blue;
width: 20px;
height: 20px;
margin-right: 10px;
margin-bottom: 10px;
}
The example above has a 89px outer parent wrapper, which is 1px shy of the 90px needed to fit 3 items + their margins.
The idea is to give the wrapper an overflow of hidden then add an inner wrapper with a width wider than the parent to accept the 'extra right margin'. Adjust as needed for the situation.
You can use the :last-of-type pseudo element. Add this to your CSS.
.inner:last-of-type {
margin-right: 0;
}
See here: http://jsfiddle.net/swLyX/5/
I have been fiddling with this issue all day now. I need to create a 3 column design where the middle div has a fixed width and the left/right divs are dynamic (responsive to the width of page). For example:
#container {
float:left;
width:100%;
}
#left {
min-width: 200px;
width: 100%;
}
#middle {
width: 250px;
}
#right {
min-width: 200px;
width: 100%;
}
HTML:
<div id="container">
<div id="left">
Left column should expand with the width of the browser - with a min-width.
</div>
<div id="middle">
Middle column with fixed width.
</div>
<div id="right">
Right column should expand with the width of the browser - with a min-width.
</div>
</div>
I have created a fiddle for this: http://jsfiddle.net/2jGAe/
Can you help me solve this styling issue?
The key is to use :
#container > div {
display: table-cell;
}
with no width on the #left and #right divs. See demo.