I have a parent div with few child divs inside. Both have float left. Problem is when a child divs breaks to next line, parent div get a wrong width.
Here is my HTML
<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
And CSS:
.parent{
float:left;
border:1px solid black;
}
.child{
margin:1px;
float:left;
width:300px;
height:50px;
border:1px solid black;
background:#65AEF1;
}
Here is fiddle:
http://jsfiddle.net/FDGqR/1/
As you can see, parent div got extra width. How can I force parent div to take exactly the width that childs really take?
This can be achieved using media queries..
Just add the following code to your css:
#media (max-width: 840px) {
.parent {
width: 548px;
}
}
#media (max-width: 550px) {
.parent {
width: 275px;
}
}
You may need to set the above fixed widths for better design.
Even I am new to this.. so let me know if something goes wrong :)
Working Fiddle
You could also set percentages % for width
.child{
margin:1px;
width:33%;
height:50px;
border:1px solid black;
background:#65AEF1;
}
Check this jsFiddle, if this is what you wanted.
You could do something like that:
<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div style="clear:both;"></div>
<div class='child'></div>
</div>
With the use of clear the parent div will take only the width of the two child divs
Couldn't you also just set the .parent width to 610px (double the child width plus a little room for the margin) and then you would have two columns of .child divs?
.parent{width:610px;}
Related
I positioned divs relative and stacked them one below the other with fixed height. Next i am moving a div 20px up like top:-20px. the problem is for all the following divs i have to do top:-20, otherwise there is a gap of 20px. Is there a work around for this.
I have added a fiddle. http://jsfiddle.net/xS3Kt/
html
<div class="class1">hello</div>
<div class="class2">hello</div>
<div class="class3">hello</div>
<div class="class4">hello</div>
css
div{
hieght:50px;
position:relative;
width:100%;
}
.class1{background:#bbb;}
.class2{top:-5px;background:#999;}
.class3{background:#777;}
.class4{background:#555;}
here you can see there is a gap between 3rd div and fourth div. to correct it i have to position all the following divs. is there a work around
I think this jsfiddle answers the question. You need to add a wrapper that groups the divs you want to shift upward.
Html:
<div class="wrapper">
<div class="class1">hello</div>
<div class="class2">hello</div>
<div class="class3">hello</div>
<div class="class4">hello</div>
</div>
<div>hello</div>
Css:
div {
border: .1em solid rgb(0,0,0);
height:50px;
position:relative;
width:100%;
}
.wrapper {
height : auto;
margin-bottom: -5px;
top:-5px;
}
.class1 {
background:#bbb;
}
.class2 {
background:#999;
}
.class3 {
background:#777;
}
.class4 {
background:#555;
}
I have some basic CSS which im trying to make a post layout for a forum but i cannot get it to work.
I have one div 100% width with two floats below it side by side. They seem to never equal 100% width and so don't line up with properly.
Equally the parent div of the two floats does not expand if the floats expand and i do not know how to fix it.
This is what i have so far:
CSS
.parent{
width: 100%;
top: 10px;
position: relative;
clear: both;
color: black;
}
.line{
height:20px;
padding-left:10px;
lineHeight: 20px;
margin:0px;
border: 1px solid black;
}
.container{
width:100%;
text-align: center;
border-bottom:1px solid red;
}
.fleft{
float:left;
width:10%;
text-align:left;
margin:0px;
padding-left:10px;
border-right:1px solid black;
}
.fleft2{
float:left;
width:86%;
text-align:left;
margin:0px;
padding-left:10px;
border-right:1px solid black;
}
The HTML:
<div class="parent">
<div class="line">
<span style="float:left;">Test</span>
<span style="float:right;">Test 2</span>
</div>
<div class="container">
<div class="fleft"> Hello </div>
<div class="fleft2"> Hello Message</div>
</div>
</div>
JS Fiddle also provided:
http://jsfiddle.net/yMaqR/10/
I have one div 100% width with two floats below it side by side. They seem to never equal 100% width and so don't line up with properly.
You have to take into consideration the padding & margin. So if you add up width + padding + margin of the floated elements and they overflow the width of the parent, they'll be wrapped.
So a possible solution is to remove the padding and add it maybe to child elements.
Equally the parent div of the two floats does not expand if the floats expand and i do not know how to fix it.
The solution is to use a clearfix
More about floats and understanding how they work.
I want 2 divs aside and they have to stay aside. If the screen is too small I don't want the two divs under each other. The first DIV has a fixed width of 400px, the second DIV can be between 150px and infinite. The height is both fixed at 300px.
How can I do that? I already tried with float, but that causes the DIVs to break if the screen is too small.
Making a wrapper-div around with a large width would work, but looks ugly and buggy.
I'd do something like the below;
HTML
<div id="containerdiv">
<div id="fixeddiv"> </div>
<div id="elasticdiv">
<div id="div2000"> </div>
</div>
</div>
CSS
#containerdiv{
min-width:550px;
}
#fixeddiv{
height:300px;
width:400px;
background:red;
float:left;
}
#elasticdiv{
height:300px;
overflow:hidden;
min-width:150px;
background:blue;
}
#div2000{
width:2000px;
background:yellow;
float:left;
}
How Divs will appear
Create a wrapper div and give it display: table-row; min-width: 550px;, and then make the divs inside it have display: table-cell;. Something like this:
.container
{
display: table-row;
min-width: 550px;
}
.container > div
{
display: table-cell;
height: 300px
}
.container > div:first-child
{
width: 400px;
}
.container > div:last-child
{
min-width: 150px;
}
And then this for the HTML:
<div class="container>
<div>I have 400px width.</div>
<div>I have at least 150px width, and am next to the other guy.</div>
</div>
Here, have a Fiddle
I have 4 divs that are set to float left but the end div keeps wrapping two a new line on a smaller screen which is really annoying me...i want them to scale with the screen size so they always stay on the same line regardless of screen size... and im trying not to use a table (which is very tempting giving they v.reliable for this!!!)
I'm wondering how to fix this annoying issue so they always stay in position regardless of screen size??
I have this as my CSS:
.wrapper{
margin:0 auto;
width: 80%;
display: table-cell;
}
.gridf{
float:left;
margin-right:3px;
width:200px;
min-height:200px;
border:1px solid white;
}
.grid{
float:left;
margin-left: 3px;
margin-right:3px;
width:200px;
min-height:200px;
border:1px solid white;
}
.gridl{
float:left;
margin-left: 3px;
width:200px;
min-height:200px;
border:1px solid white;
}
My HTML:
<div style="overflow: hidden;">
<div class="wrapper">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
Please help :D
Your wrapper is a percentage width container with 4 fixed-width child elements floated.
The width of the wrapper is dependent on the width of the viewport. If the viewport is narrowed to the point that the wrapper's width is less than that of the 4 child element widths together, then naturally they won't all fit and therefore will wrap.
The fix is to make sure your wrapper doesn't get smaller than the combination of the children.
So, add up with widths, borders and margins of the child elements and then give the wrapper a min-width attribute equal to that.
Hi i think you should this check to this demo
.wrapper {
margin: 0 auto;
width: 80%;
border: solid 1px red;
overflow: hidden;
}
.gridf,
.grid,
.gridl {
Background: green;
width: 24%;
min-height: 100px;
float: left;
margin: 2px 0;
}
.gridf {} .grid {
margin: 2px 1%;
}
.gridl {
background: yellow;
}
<div class="wrapper">
<div class="gridf">One</div>
<div class="grid">Two</div>
<div class="grid">Three</div>
<div class="gridl">Four</div>
</div>
Although this is an old post, I think that the problem, which I also run into, is the fact that you want all these cells to be of a fixed size, and not %, right? The solution you chose changed initial format where you specified width:200px;
Well, I would suggest to look here: http://jsfiddle.net/gn2bg/
The ONLY one thing I did is to add inner wrapper around your cells:
.inwrapper{
float:left;
overflow: hidden;
min-width: 830px;
}
and new html as this:
<div class="wrapper">
<div class="inwrapper">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
Notice that your wrapper requires 80% of space.
The inwrapper, however, tells that its size is fixed - 830px (total of all internal div sizes plus room for padding.)
This way inwrapper uses 'elbows' to stretch the width, and override these 80% of 'wrapper'
I understand that you already made decision as to what is your best solution. I am leaving this response to anyone else in the future who needs exact answer to your exact question.
You can try removing the table-cell display rule from the wrapper and setting percentages (or min-widths) on the child divs like this jsFiddle example.
That should do the trick :
<div class="wrapper">
<div style="width:850px">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
And that will be supported on any browser.
http://jsfiddle.net/5GrKU/3/
HTML
<div style="overflow: hidden;">
<div class="wrapper">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
CSS
.wrapper{
margin:0 auto;
width: 80%;
display: inline;
}
.gridf{
float:left;
margin-right:3px;
width:20%;
min-height:200px;
border:1px solid red;
}
.grid{
float:left;
margin-left: 3px;
margin-right:3px;
width:20%;
min-height:200px;
border:1px solid red;
}
.gridl{
float:left;
margin-left: 3px;
width:20%;
min-height:200px;
border:1px solid red;
}
for you reference i have also added the URL of the demo. http://jsfiddle.net/sg8FE/
UPDATE
just change display:inline in wrapper class to display:block rest all is right and the div's are centered.
by giving a fixed width in your inner divs you are forcing them to have that width no matter what is the size of the view port. And giving the outer div a width of 80% you are shrinking its size with the width of your view port. You need to do either giving fixed width to all those divs or giving a relative width to all.
I have two divs in the same line, div_left, div_right
I'd like div_right have the fixed width 200px, and left_div extend to the max width and height of the left page, how could I write this with css?
html:
<div class="right"></div>
<div class="left"></div>
css:
.right { background: red; height:300px; float:right; width:200px; }
.left { background: green; height:300px; padding-right: 200px; }
code: http://jsfiddle.net/47YMn/1/
may be you can use display:table property like this http://jsfiddle.net/sandeep/NCkL4/8/