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
Related
I am facing with a problem that my top menu overlaps the body. When actually menu must be placed above body.
I've already tried display: block; but it didn't help
Can you look trough it please ?
Here my Demo
Okay, try this. Give the menu div
style="display:table;"
and hope it will solve your issue. Before it doesnot assume any space for div itself, but only for the content and the main div occupies the space right from the top.
Here is the fiddle. I have given there inline css. But I suggest to define a class for menu and put the css in there.
Have you created a container div for the entire page? And then have a background div and a separate menu div?
<div id="page_container">
<div id="background"> Background code
<div id="menu">Menu code
</div>
<div id="body_content">Content in body code
</div>
</div>
</div>
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%
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/
I have below div with
<div style="height:900px;width:800px;overflow-x:scroll;overflow-y:hidden">
//content here
</div>
My problem is when i scroll right or left ,div border is not appearing.So it's look like
cutting the data.I tried so many ways but no luck .Any help appreciated.
Thanks,
Chaitu
Set padding to your div. Like this:
<div style="height:900px;width:800px;overflow-x:scroll;overflow-y:hidden;padding:5px;">
//content here
</div>
This will ensure the inside contents remain distant from the div.
In the code you provided, you aren't giving the div a border.
Try changing your code to this (adding border CSS property):
<div style="height:900px;width:800px;overflow-x:scroll;overflow-y:hidden;border:2px solid black">
<!-- Content goes here -->
</div>
Also, like Naveed said, try adding padding (padding:5px; for example) to guarantee that your content remains within the div and doesn't flow over or get clipped.
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. :)