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.
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>
Short version: Why does overflow:auto cause a div to the right of a left floated div not to wrap its text around the left floated div? (Bonus: Is this an acceptable way to accomplish a column effect?)
Long version...
I have two divs that I wish to be next to each other, and displayed as columns. The div on the left has a specific width and height. And the div on the left is shorter than the div on the right. However, I do not want the text in the right div to wrap under the left div.
Here was my first attempt...
<div>
<div style="border:1px solid grey;
width:100px;
height:100px;
float:left;">
Div on the left.
</div>
<div>
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
...I knew the text in the right div would wrap under the left div. And it did.
Then I remembered a page I had created that had a column effect. I had copied and pasted it from I know not where. All it did was assign overflow:auto to the div on the right. It looks like this...
<div>
<div style="border:1px solid grey;
width:100px;
height:100px;
float:left;">
Div on the left.
</div>
<div style="overflow:auto">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
Voila, the right divs text no longer wrapped under the first (left) div! The second (right) div appeared as a column.
So, I read everything I could find on overflow:auto and found no mention of why I should see this behaviour. Can anyone explain it to me?
Also, is this an acceptable way to achieve a column effect?
overflow: auto (or anything but visible) causes your second div to create a new block formatting context. This means the text within that div is now in its own formatting context, rather than sharing the same one as your first, left-floating div (which is the containing block of both divs), and so it is no longer allowed to flow around the first div.
Floats also generate their own BFCs, but that doesn't exactly relate to the matter at hand. It does however also prevent reflow, achieving a column effect, as shown in the other answers.
Is this an acceptable way of creating a column effect? I don't know, but it does seem unconventional. You can just float the second div as well instead for the reason mentioned above (although even that, in favor of upcoming true layout modes like flexbox and grids, is now seen as a browser compatibility hack these days, but is the best we've got for the time being).
Remember that inline content is designed to be able to flow naturally around floated content; see CSS2.1, §9.5 Floats.
Remember also that the purpose of overflow is to control content overflow in a box with a limited size. That it causes a box to create a new BFC, influencing floats as a result, is but a side effect, the reason for which is explored here. It's a lengthy read, but it includes a bit about preventing reflow, which I'll quote here for ease of reference:
And so, this change was brought about in CSS2.1, documented here. Now if you apply an overflow value other than visible only to the second box, what a browser does is push the entire box aside to make way for the float, because the box now creates a new block formatting context that encloses its contents, instead of flowing around the float. Here's what it looks like with overflow: auto for example:
Note that there is no clearance; if the second box had clear: left or clear: both it would be pushed down, not to the side, regardless of whether it established its own BFC.
By the way, yes, this means your clearing div needs to be there if you want to always clear the first div.
To get the divs next to each other they both will need a float and fit in the surrounding div.
Example:
<div style="width:200px;">
<div style="width:100px; float:left;">
content
</div>
<div style="width:100px; float:left;">
content
</div>
</div>
If you want the outlining div to grow with the largest div place overflow:hidden; to the div.. If that div doesnt have a height with it then it will scale with the larges div.
Preview:
http://jsfiddle.net/WzVBE/
Remove float:left from the first div.
<div>
<div style="border:1px solid grey; width:100px; height:100px;">
Div on the left.
</div>
<div style="overflow:auto; ">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
DEMO
You can try this
<div style="width:800px; background-color:#CCC">
<div style="width:300px; height:100px; float:left; background-color:#CCC">
Div on the left.
</div>
<div style="height:100px; float:left; width:500px; background-color:#999">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
Once assigning overflow with a value other than visible, all its child elements will be clipped. It is the purpose of the overflow property. However, I have to make one of the child elements to be 'floated' and not clipped (like a popup) -- just one of them; not all. Is it possible?
Take the following as an example. Is there any CSS setting that does not clip the yellow div, while clipping the blue element? (Currently they are both clipped)
<div style="position:absolute;width:100px;height:50px;overflow:hidden;border:1px solid black">
<div style="top:30px;width:50px;height:100px;background:yellow">
</div>
<div style="position:absolute;left:50px;top:0;width:50px;height:100px;background:blue">
</div>
</div>
The code can be also found at http://jsfiddle.net/kZBxD/
Do you need something like this:
check this fiddle : http://jsfiddle.net/kZBxD/3/
<div style="position:absolute;width:100px;height:50px;overflow:hidden;border:1px solid black">
<div style=" position:fixed;width:50px;height:100px;background:yellow"></div>
try the below fiddle: the yellow div is floating outside and blue div is inside as per you need.
http://jsfiddle.net/kZBxD/2/
A bit of head scratching going on here, so any pointers would be much appreciated!
I have a header div that has the property overflow:hidden. On the left of this header is the page title, and on the right a number of images. This works perfectly well and everything shows as it should.
However, I now need to wrap these images around div tags (they will become clickable, and updated via Ajax - so I need to define the postback div for each image). As mentioned, without wrapping the image around a div tag, they show fine. However, as soon as I add the div tags, they disappear (though still show in the page source). The div tags take the simple form of and no styling is associated with them.
I'm sure I'm missing something here, but for the life of me it's totally bypassing me right now!
Thanks :-)
Your question is bit unclear for me, any way if i understood your question
If you need to have click event you can use asp:ImageButton to hold the image.
if you really need to use div
<div class="header"> // this is the one with overflow hiddden
<div class="left"> // this div holds the page title ; float:left
<h1>Title</h1>
</div>
<div class="right"> // this div to hold the divs which contain images
// if all your images are same height set the same height to this div and float:right
<div class="image"> // this div holds the image; make float:left set height and width
<img/>
</div>
<div class="image">
<img />
</div>
<div class="image">
<img />
</div>
</div>
</div>
Hope this helps
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