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
Related
I aling divs in through right
{ float: right;}
but end of the page it (when divs become more than 4) the fifth div goes under other divs while page expands to down. I dont want this. I want height of the page become fixed and web page expand left to right always how can i do this.
Use min-width and display:table-cell example in fiddler : http://jsfiddle.net/HarishBoke/c8G7V/
On the top level parent element (presumably a 'body' tag) set the overflow-x property, in CSS, to scroll.
Something along the lines of:
body{
overflow-x: scroll;
}
Note that this possible solution may not be pre-IE8 friendly. As far as keeping the page's height fixed, define the height in CSS and set the overflow-y to be hidden. This will hide any elements exceding the parent element's height, rather than stretching the content.
You need a extra div with large width which contains other div's. This will not allow your body container to add new line when running out of space.
HTML:
<div id="container" class="clearfix">
<div id="wrapper" class="clearfix">
<div id="div1">Div1</div>
<div id="div2">Div2</div>
<div id="div3">Div3</div>
<div id="div4">Div4</div>
</div>
</div>
CSS:
#container {
height: 275px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
#wrapper div {
float: right;
border:1px solid black;
width:200px;
height:100px;
display:inline-block;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
To make it more dynamic,you can first calculate the space taken by inner div and then some ettra space on the wrapper div accordingly
Javascript:
var width=0;
$('#wrapper>div').each(function() {
width =width+parseInt($(this).css('width'));
});
wrapperWidth=width+100;
$('#wrapper').css('width',wrapperWidth);
Updated Fiddle: http://jsfiddle.net/ankur1990/mgxk5/3/
http://optimalpages.de/DrupalMusi/
How can I position the main content div in the middle without it collapsing to the left, when left sidebar is shorter than the content? Is that possible? I don't want to use a fixed height for the navigation, but can I somehow say "sidebarleft height = content height", or is there an easier way?
Thanks!
Actually you are floating only elements to the left without any wrapper element, so what happens is this..
Instead, wrap the other 2 elements inside a wrapper element and than float it to the left
.left_wrap {
float: left;
width: 30%;
}
.right_wrap {
float: left;
width: 70%;
}
.right_wrap > div {
border: 3px solid #ff0;
height: 100px;
}
<div class="main">
<div class="left_wrap">
Hello
</div>
<div class="right_wrap">
World
<div></div>
<div></div>
</div>
</div>
Demo
Better Demo
If you want even a better one, I would suggest you to wrap the boxes inside the parent containers, and instead of floating the child elements, float the parent.
Demo
Also, don't forget to clear your floated elements, just make sure you clear them, you can use a self clearing parent CSS like
.clear:after {
content: "";
clear: both;
display: table;
}
And call the above class on the element containing floated elements as their children, where in this case, it's <div class="main"> so it should be now
<div class="main clear">
<!-- Floated Elements -->
</div>
I'm not quite sure if this is what you mean but try:
#node-29{
float: right;
clear: left;
margin-left: 0;
}
This will position the div's next to each other and keep the main content to the right.
This can be quite complex depending on your existing theme.
I wrote this page a while back to shows you how you can do that.
http://linux.m2osw.com/3columns
More or less you need a first div that encompasses the left column and the content. That div is the one that gets centered.
To make it simpler you can set a specific width to the div and you get something like this:
div.page
{
width: 900px;
margin: 0 auto;
}
That will center the main div.
For the column and the content, both are float: left; div's. In order to "close" the lot, you want another div just before closing the main div. That one has a style that ensures that the main div has the correct size: clear: both;.
we can use margins to set the div position .we can either specify fixed margins or we can give percentage value ,so that it will based on the total size of the screen.
<!DOCTYPE html>
<html>
<head>
<style>
#main
{
background-color:yellow;
}
#main
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body >
<div id="main">
this is how we can display main div in centre
</div>
</body>
</html>
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.
I have two divs. These two divs are orientated as two vertical columns next to each other. Instead of pre-determining the height of the divs via css I want to have it grow dynamically with the content I put into it. Which is simple enough for one div but my problem is that I want the div on the left with background color green to grow to the same height of the div on the right . There is always going to be more content in the right than in left.
Assuming the elements are after body. Give 100% to the body, and all the div
body, #div1, #div2 { height: 100%; }
If they are not, then you have to either fix the height of the parent or chain 100% height all the way to the body again.
#parent { height: 800px; }
#div1,#div2 { height: 100%; }
Enclose those divs in a parent div, and set their height to 100%.
You simply need a three-column (X)HTML + CSS Layout.
It's here
Let insert a parent div (container of those two adjacent divs)
add a property 'display: flex;' to the parent div
.parent{
display: flex;
}
.child1, .child2{
padding: 10px;
border: 1px solid gray;
}
<body>
<div class="parent">
<div class="child1">
CHILD 1 AREA<br />
CHILD 1 AREA
</div>
<div class="child2">
CHILD 2 AREA
</div>
</div>
</body>
Can you force a container DIV height to accomodate two floated div children? Is there a fancy trick I can use to do that? I am trying to make two equally sized divs inside the parent div. I would like them to appear side by side with a little whitespace between them. Child2 tends to pop out and go below Child1. Note Child2 contains a table. Should I be floating?
HTML:
<div id="parent">
<div id="child1"></div>
<div id="child2">
<table><tr><td>content</td></tr></table>
</div>
</div>
CSS:
div#parent
{
background-color: #C6E4E0;
border: solid 3px #017E6F;
font-family: Arial;
font-size: 10pt;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
width:99%;
}
div#parent div
{
width:49%;
float:right;
padding:3px;
}
div#parent div:first-child
{
float:left;
}
This is not a clearfix issue guys, his problem is that his two floated divs are not appearing side by side.
First of all, you do not need to set the width of the parent div, divs are block elements which means they automatically adjust their width to take up the full width of their parent (in this case, presumably the parent of div#parent is the body).
Because you are setting the width explicitly AND giving it padding, it can potentially extend BEYOND the body. That doesn't really matter, but if you apply this same knowledge to the child floated divs and you can see why the right one might get bumped down to the bottom.
First, if you are explicitly setting the widths of the divs to a percentage, you do not need to add padding. Because you are dealing with percentage widths, it is better to add padding to the content of the divs rather than the divs themselves, because padding is ADDED to the width. Therefore, if you added 10px padding to a div that had a 49% width in a 100px parent, it would have a width of 49px + 10px + 10px (2 sides) for a total calculated width of 69px.
Since you didn't post your markup and content or which browser you are testing in, I can't say exactly why the div is being bumped down. There are two likely possibilities.
You are using IE, which allows tables to extend beyond its parent div which will cause breakage. Try explicitly setting the table width to a percentage of its parent or something like that.
The 49% width + padding = greater than [parent-width] - [left-div-width]. This will cause it to get bumped down because the left div and right div are too wide for the parent width.
I use the clearfix class.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
/** html .clearfix {height: 1%;}*/
.clearfix {
display: block;
}
/* End hide from IE-mac */
then just use the class in every floated-element container.
#container { width:200px; }
.floated { width:100px; float:left; }
.clear { clear:both; }
<div id="container">
<div class="floated">A</div>
<div class="floated">B</div>
<div class="clear"></div>
</div>
I am not a fan of clear: both;, I rather do this in Jonathan Sampsons example:
#container { width:200px; overflow: hidden; }
.floated { width:100px; float:left; }
<div id="container">
<div class="floated">A</div>
<div class="floated">B</div>
</div>
By the way, you want
div#parent > div { float:left; }
instead of
div#parent div:first-child { float:left; }
which is still not IE6 friendly, but it will float both child DIVs.