here is my code
<div class='content'>
<div class='div1'>content</div>
<div class='div2'>content</div>
</div>
.content { width:300px;}
.div1 { float:left;width:200px;}
.div2 { float:left;width:100px;}
in some case I need to set display:none for div2. is it possible to set .div1 width to full-size of .content ( 300px )
Reorder your divs, and use overflow: hidden:
<div class='content'>
<div class='div2'>content 2</div>
<div class='div1'>content 1</div>
</div>
.content { width:300px; overflow: hidden;}
.div1 { overflow: hidden;}
.div2 { float:left; width:100px;}
So long as you only need to add or remove the second div, the easiest solution is to only make that second div a float, and place it within the first, non-floated div, like so: http://jsfiddle.net/Tb89A/ .
Just remove the comments on the display:none to see it in action.
Try to add class (for example, hidden) to div2 when you set display: none and then set fullwidth do div1 (in which you define width: 300px). Finally, you can go with jQuery and conditionals:
if($('.hidden').length()) {
$('.div1').addClass('fullwidth');
}
Of course you may want to change those class names to more specific ones.
I can't think of any different solution, since CSS doesn't allow conditional statements.
Related
OK, so here is my problem,
I need to have four DIVs in one line. The First three are float:left and the fourth one is float:right. The container has a specified width.
I need the third div to fill all the space from the second div that is floated to the left, to the fourth div that is floated right.
EDIT: DIVs #1, #2 and #4 have dynamic width as well... They have a certain padding and the content defines the width.
Why not turn the question on its head, and establish how to create the layout you want- in which case, likely the simplest approach would be:
Demo Fiddle
HTML
<div class='table'>
<div class='cell'>fit</div>
<div class='cell'>fit</div>
<div class='cell'>expand</div>
<div class='cell'>fit</div>
</div>
CSS
.table {
display:table;
width:100%; /* <-- will make the divs align across the full browser width */
height:50px;
}
.cell {
display:table-cell;
border:1px solid red;
width:1%; /* <-- will make 1, 2, 4 only fit their content */
}
.cell:nth-child(3) {
width:100%; /* <-- will make 3 expand to the remaining space */
}
Solution Using Floated Elements
Here is one way of doing this using floats.
Arrange your HTML as follows:
<div class="panel-container">
<div class="panel p1">Panel 1 - and a word</div>
<div class="panel p2">Panel 2 - Done. </div>
<div class="panel p4">Panel 4 - End!</div>
<div class="panel p3">Panel 3</div>
</div>
and apply the following CSS:
.panel-container {
width: 600px;
border: 1px dotted blue;
overflow: auto;
}
.panel {
background-color: lightgray;
padding: 5px;
}
.p1 {
float: left;
}
.p2 {
float: left;
}
.p3 {
background-color: tan;
overflow: auto;
}
.p4 {
float: right;
}
The trick is to place the floated elements (.p1, .p2. .p4) ahead of the in-flow content (.p3).
Use overflow: auto on the parent container to keep the floated child elements from affecting the layout outside of the parent element.
I added overflow: auto on .p3 so that the padding gets included within the containing block.
See fiddle at: http://jsfiddle.net/audetwebdesign/9G8rT/
Comments
The one disadvantage of this approach is that the order of the content is altered, that is, .p3 appears after .p4 in the code order.
Another side effect, which may be desirable in a responsive design, is that the child elements will wrap onto 2 or more lines as the parent container width gets smaller.
If you need to retain the content order in the HTML code, the CSS table-cell solution is a good alterantive.
The table-cell solution will keep the child elements on a single line regardless of the width of the parent container.
One final advangtage of the floated element solution is that it is more backward compatible than a CSS table-cell solution, but as we move forward, this is becoming less
of a compelling argument.
I can not get my yellow background color to show up with the nested divs that show up in 3 separate columns. What am I doing wrong?
<div id="wrapper">
<div class="rightside">
Test
</div>
<div class="rightside">
Test
</div>
<div class="rightside">
Test
</div>
</div>
CSS below:
#wrapper {
background-color: yellow;
}
div.rightside {
width: 31%;
margin: 0 1.33333em 0 0;
display:inline;
float:left;
}
Here is my jsfiddle: http://jsfiddle.net/yPX5Q/2/
Thanks
Cheers
Add overflow:auto to your wrapper div
#wrapper {
background-color: yellow;
overflow:auto;
}
jsFiddle example
Floating the inner divs essentially gives the wrapper div no height. By adding the overflow:auto it brings back the expected behavior.
you can set overflow:hidden; http://jsfiddle.net/yPX5Q/3/ on the parent container or use a clearfix method with a pseudo element or extra element.
More info about floatting elements here : http://css-tricks.com/all-about-floats/
I have a fixed-width left div, and I want to make the right div fill the remaining space.
So far I've been taking this approach recommended by another SO poster, but it doesn't work if I have content inside the right div.
The content in the right div is set to width: 100%, so I would expect it to be no wider than the right-hand div, but it overflows the right div.
<div>
<div id="left">left</div>
<div id="right">right<div id="insideright">overflows</div</div>
</div>
<style>
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
width: 100%;
background-color:#00FF00;
}
#insideright {
width: 100%;
background-color: blue;
height: 5px;
}
</style>
JSFiddle here, demoing the problem: http://jsfiddle.net/MHeqG/155/
What can I do?
I want to support older IE browsers, so I'd rather not use display: table-cell etc if I can avoid it, or at least not without a reasonable fallback.
Actually it's pretty simple... don't add 100% to the right div :)
just add the overflow property
LIVE DEMO
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
overflow:auto;
background-color:#00FF00;
}
#insideright {
background-color: blue;
}
...and if you even wondered how to make the red (left) div fill the remaining height...
DEMO
Not sure exactly what you're trying to do (your references to right are ambiguous). But if I'm understanding, you want the insideright to be nested within the right without overflowing?
Why not use a <span> instead? <div> out of the box is display: block; which will force a wrap like that. Alternatively, override this behavior by using display: inline; or display: inline-block;.
<div>
<div id="left">
left
</div>
<div id="right">
right
<span id="insideright">this should not overflow right</span>
</div>
</div>
http://jsfiddle.net/brandonscript/MHeqG/157/
Consider the following: http://jsfiddle.net/Yq39W/1/
HTML:
<div class="parent">
<div class="child1">
Some text...
</div><div class="child2">
2
</div><div class="child3">
<form>
<input type="text" />
<input type="text" />
</form>
</div>
</div>
CSS:
.parent {
width:100%;
background:red;
margin:0px;
padding:0px;
}
.child1, .child2, .child3 {
display:inline-block;
border:1px solid black;
padding:10px;
}
.child1 {
background:blue;
float:left;
}
.child2 {
height:200px;
background:yellow;
}
.child3 {
background:green;
float:right;
}
How can I vertically center align the child divs, while child2 fills out the remaining space? (Meaning that the child1 and child3 will be moved down a little bit, so that the centers is aligned with center of child2)
What if height is NOT defined explicitly for any of the divs (in the example, child2 is explicitly set to 200px)? Is is still possible to align on the vertical axis?
It is important for me, that no dimensions are defined explicitly (except for parent width which would be 100% and any padding/margin on the elements).
Hope you guys can help out! :)
Assuming you mean vertical centering the child elements with child 2, then remove the floats and just add vertical-align: middle; since they are already display: inline-block. No need to declare a specific height, they'll all be vertically aligned with each other no matter what the tallest element is.
In the demo, I use <br />s to make child 2 taller without an explicit height set just to demonstrate.
Demo: http://jsfiddle.net/shshaw/jnE89/
You may want to set max-width: 33% for the children so that they won't go to multiple lines, but that just depends on the effect you're going for.
Bonus: If you want, you can use text-align: justify on the parent to ensure that your boxes cover the available space, like a grid (see Text-align: Justify and RWD or the updated demo; note that the boxes must have spaces inbetween them in the HTML for it to work)
I have a div holder which has a set of divs as children. The issue is that the content is variable by height, depending on the content of its children, so how can i set the css properties for the holder div auto adjust to the sum of heights of its children?
I have tried several configurations of the div holder css like min-height, padding:auto, etc.. but no success.
Here I have placed the code: http://jsfiddle.net/nuAQY/
Thanks.
Just remove the heights on the child divs.
When you declare the heights it's saying no matter what the content is it will always be that height, so when the content changes, the height of the child doesn't change, so the height of the holder doesn't change.
.holder {
width:250px;
min-height:50px;
border:1px solid #EDEDED;
}
.header {
width:100%;
}
.body {
width:100%;
}
.footer {
width:100%;
}
Make a class called clear, and place it after your last div child but still in the holder.
Like so:
.clear { width: 100%; height: 0px; clear: both; display: block; }
then...
<div class="holder">
<div class="child"></div>
<div class="child"></div>
...
<div class="child"></div>
<div class="clear"></div>
</div>
The problem is that you have set heights on all DIVs, but the content is more than that height so it runs out of it. You either have to remove the heights, or set overflow:auto for each of those DIVs, but then you will get a scrollbar. If you want to hide the extra content, you can use overflow: hidden