Please check out this image
<body>
<div class="main>
<div class="left">blah blah </div>
<div class="right">blah blah </div>
<div style="clear:both"></div>
</div>
</body>
CSS part:
.main{min-width:1200px}
.left{width:400px ; height:auto ; float:left }
.right{width:auto ; height:auto ;float:left }
I hope friends, you have got an idea from the image. Please help me.
I am dynamically inserting data into right div and when its width exceeds 800px, it comes down the left div. But instead of that I want a horizontal scrollbar to view the content. One solution may be, removing float:left from right div. But still it causes problem.
on floated elements, height:auto means the height of the content (the default for floated elements). try with height:100%
Related
I have a problem about bottom alignment of a div and I don't find any solutions.
All div are contained in a main div, one is left floated and all other must be place on the right of it;
Just one of them it must be bottom aligned, but trying with position absolute and bottom tag it's placed over the floated one.
CSS:
#container {width:730px;position: relative;min-height:120px;}
#image_box {width:220px; float:left; padding-right:10px;background:#222;color:#FFF;}
#box_dx1 {width:500px;background:#666;}
#box_dx2 {width:500px;padding-top:10px;background:#999;}
#box_dx3 {width:500px;padding-top:10px;background:#CCC;}
HTML:
<div id="container">
<div id="image_box">Box Sx Image <br>Row<br>Row<br>Row<br>Row<br>Row<br>Row</div>
<div id="box_dx1">Box Dx Title</div>
<div id="box_dx2">Box Dx Description</div>
<div id="box_dx3">Box Dx Param</div>
</div>
Moreover div's heights are variable, image_box is optional(cannot exist) and text of box_dx2 could wrap under the image_box.
Any ideas?
Thanks!
If the height of box_dx1, box_dx3 and image-box is always going to be same, you could just set a min-height for box_dx2. That way, if you add more content to box_dx2 it will eventually become taller than the image and text will wrap around it. In your example it would be something like:
#box_dx2 {
width: 500px;
padding-top:10px;
background:#999;
min-height: 70px;
}
jsFiddle
However, if the height of those boxes isn't fixed, maybe the easist thing is to calculate the min-height using some jQuery.
I'm trying to solve a scrollbar problem.
I had the problem that I wanted to have three divs aligned vertically and that the middle one will have the space left of the footer and the header
This post helped me with this part: Middle div with 100% in CSS?
The things is that I need that the content div (the middle div) show a scrollbar when the content overflows the middle div space.
Now I have this: http://jsfiddle.net/rv4XS/31/
<body>
<div id="wrap">
<div id="container">
<div id="header">header
</div>
<div id="content">data<br/>
data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>
</div>
</div>
</div>
<div id="footer">footer
</div>
</body>
Thanks for the help.
EDIT 1: Only firefox and chrome, No IE.
EDIT 2: Maybe I'm not explaining well my question: I have a header that has variable height based on the content it has, the footer has a fixed height. Now, knowing that the header has a variable height and that the footer has a fixed height, how can I make a middle div (content div) that takes all the space left by the footer and the header?
If the header increases its height a lot ... what will happen is that the middle div will not be visible but only the header and the footer. of course the idea is that if the middle div has some data inside and it is cropped, it has to show the scrollbar.
You can give #content as below :
Note : cannot give % as you gave.Then It Occupied whole height and width which the content has.
Correct One
#content {
width:100%;
height:100px;
overflow: auto;
}
I have updated JSFIDDLER
This is the current setup:
<div id="youtubelatestnews">
<div class="box youtubebox">
</div>
<div class="latestnews">
</div>
<div class="clear"></div>
</div>
But the problem is the container <div> which is "youtubelatestnews" has too much space at the bottom.
Here's the site: http://voila.easywebprojects.com/
The <div>s I'm referring to are the sneak peek & Latest News portion.
The reason for the extra space is the clear div, which will clear below the elements on the left also.
You can remove the clear div, and use overflow: hidden; on the #youtubelatestnews div. As you don't have a height specified for it, the overflow style will only make the element contain its children.
Try to add float:left; style to youtubelatestnews div, it worked for me ;-)
The margin-bottom on .box-product > div plus the margin-bottom on .box are combining.
The extra space can be caused by the default height of clear item sometimes,
Try to add height:0px for the clear .
https://jsfiddle.net/8zpt7tm3/
In this example http://jsbin.com/inoka4 no width is defined for parent element
if i want to wrap red boxes in container border.
then we can make this in 5 ways
to giving float also to <div class="container">
overflow:hidden or overflow:auto
any clearfix hack to <div class="container clearfix">
Giving height to <div class="container">
adding one more html element (for example another div or <br >) after 2
boxes in <div class="container"> enter code hereand give
clear:leftor:bothor:right` to that
element
my question is any other option except float do not make any changes in <div class="container"> and inner boxes width. but if we use float:left or right to parent box then it's shrink the whole box and inner-boxes as well.
Why?
example link: http://jsbin.com/inoka4
Edit: My question is not about which method i should use, the question is why Float shrink the width
I think the better option is to use overflow:hidden. It is a simple one line change and it works.
div#container {
...
overflow: hidden;
}
Adding extra divs for clear fix requires changes in html for something that is really css. Alternatively, when using clear fix by doing hacks like...
div:after {
content:....
...
}
your css just gets bigger and messier. But it still is a good option (especially when you need to have things that overflow the box)
Reference:
http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/
If you dont' use float on the container it's width is set to 100%. If you add a floating, it only takes the space it needs. In this case the width is calculated by the two divs inside.
To wrap the red boxes in the container border there is not other option except adding float to the container. The only other option would be to absolutely position all the elements but in this case you have to know the width and height of all elements in advance. So that really isn't an option.
So my advice is to use float on the container and add a clear: both on the element after the container.
Your best bet is to always clear your floats. Just after you close the div with class .right, and just before you close the div with class .container, add a new div like this:
<div class="clear"></div>
.clear is just {clear:both;} in your stylesheet. That's what I use all day long, and works like a treat.
The final markup would be:
<div class="container">
<div class="left"> ... </div>
<div class="right"> ... </div>
<div class="clear"></div>
</div>
Edit: Just like your last example, apparently. :)
HI
i want to give my div's some border but when i do a box is created with all the borders but the contents of teh div are not surrounded!! Any suggestions?
try
overflow: auto
You must have some floating content inside.
<div id="divWithBorderIssue">
blah
<div style="clear:both;"></div>
</div>
You could also use a clearfix
edit: of course if you provided the code it would be easier to help you