I've discovered an annoying situation: if I have a table nested inside a div with overflow: auto (or overflow: none or overflow: scroll for that matter), and the table's width exceeds the window's width, the dive will cut-off the table and add scroll bars ... as it should.
However, if I take that exact same scenario and throw it inside (another) table, suddenly the overflow property stops being respected.
As an example of what I mean, here's the working case:
<div style="border: 1px solid green; overflow: hidden">
<table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table>
</div>
If you look at that in a browser you'll see a green border, but not a red one, on the right, because the div is hiding the overflow from the table so all you see is its border.
Compare that to the exact same code, wrapped in a table:
<table><tr><td>
<div style="border: 1px solid green; overflow: hidden">
<table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table>
</div>
</td></tr></table>
You'll see that there is no right-border, because both elements overflow off the page; if you scroll right far enough you'll see both borders, because the div never constrained its table.
I get that this is probably happening because TDs calculate their widths differently than other elements, and so the div inside the TD can't overflow properly because its calculating 100% width "wrong" (although not really wrong per say, just wrong in terms of what I want).
Given that, can anyone help me figure out how to get proper overflow behavior in the "inside a table" case?
Just use table-layout: fixed;width: 100% at outer table
<table style="table-layout: fixed;width: 100%"><tr><td>
<div style="border: 1px solid green; overflow: hidden">
<table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table>
</div>
</td></tr></table>
Just wrap the table with another div.
<div style="overflow: hidden">
<table><tr><td>
<div style="border: 1px solid green; overflow: hidden">
<table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table>
</div>
</td></tr></table>
</div>
Sadly, I wound up having to solve this by removing the outer table (which meant having to revamp the layout entirely). I'd still love to hear if there's another way though ...
Related
I'm trying to make a layout where I have a Div that gets added its content in a dynamic way. I want this "parent" div to have a fixed height and when content its added the div grows horizontally as needed.
This is the test HTML I made to isolate the problem.
<html>
<head>
<link rel="stylesheet" href="styletest.css" />
</head>
<body>
<div style="width:700px;overflow:auto">
<div class="anio">
<div class = "semestre">
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
</div>
</div>
</div>
</body>
</html>
Here i have 7 class=floater divs that go into the class=semestre container div which is supposed to grow horizontally as I add more class=floater divs. all of this goes into a fixed width div with overflow-x:auto.
after some fighting with the css i managed the following:
div.floater {
margin: 4px;
width: 110px;
height: 82px;
border: 1px solid #ccc;
display: inline-block; /*this to make the floaters go horizontal*/
}
div.semestre{
white-space: nowrap; /* this avoid the floater overflowing under the parent div*/
margin-top: 5px;
margin: 2px;
height: 90px;
border: 1px solid #ccc;
min-width:98%;
}
div.anio{
margin : 2px;
border: 1px solid #ccc;
min-width:98%;
}
So this worked..kind of.. the class=floater divs go horizontal and cause the activation of the overflow-x on the outermost div, but the container divs that contain the class=floater div don't grow as i think the should (this can be seen by the borders not growing). After googling I found some proposed solutions like adding width:auto on top of the min-width: css property or floating them, but none worked. This is a minor issue since the borders are just for formatting.
The mayor problem I'm having is when I try to add content to the class=floater divs they just go CRAZY and won't stay where they should( when they had no content). i tried reverting the white-space:nowrap by adding white-space:normal to the floater class but that didn't work. After that I just went berserk and started trying random stuff and managed to fix my first problem but the I forgot what I did and went back to step 1 D:.
To be honest I'm very new to html/css and I'm learning by doing. So if this question has been already asked/answered believe me that I searched for it. Also excuse my English, doing my best.
Thank you for your time.
edit:
By request, the fiddle :D http://jsfiddle.net/UBYKy/1/
there you can see both of my problems.
edit 2: i believe i have found a solution to both problems. For the first one I solved it by adding display: inline-block to the parent divs and for the 2nd problem I added vertical-lign:top to the floater class css(as afshin suggested) and it works just fine. I hope this helps anyone having the same problem.
I think you should use this
div.floater {
vertical-align:top;
margin: 4px;
min-width:110px;
width: auto;
height: 82px;
border: 1px solid #ccc;
display: inline-block; /*this to make the floaters go horizontal*/
}
DEMO
I have a box that has the div class box_1 assigned to it.
Now i want to give this class a width but also make it expandable.
If i just try to give it a value of auto, It will just expand to the end of the screen. thats not what i want. So say i give it a width of 4 inches but the content inside the div requires more space (dynamic content), it will need to be expanded. any ideas on how i could make it expandable (only when it needs to be expanded) and also give it a 'default width'?
You can use the CSS propety min-width for this.
You can do it like this:
.box_1{
min-width: 4in;
}
Now the div would take up 4 inches by default if the content fits within it, and expand if needed.
Update :
Looking around i found this How to make div not larger than its contents?
So what you need is to use following css:
.box_1{
display: inline-block;
min-width: 4in;
}
This sets the minimum width to a specific amount and converts the element to inline-block. But as per the post linked above this does not work in IE 7/8, for that you would need to change the div to span.
Try it out here:
div => http://jsfiddle.net/TdNHs/
span => http://jsfiddle.net/TdNHs/1/
.box_1{
min-width: 0px !important;
}
it will get the small as possible and also expandable
ti will be at 0px, but.. hey, what's your default width anyway?
Update
http://jsfiddle.net/tbUUt/1/
I just used the content inside te expandable div some boxes, but you can remove them one by one and the div will resize.
#box_1{
border: 1px solid red;
display: inline-block;
}
<div id="box_1">
<div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
<div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
<div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
<div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
<div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
</div>
I am floating a couple divs inside a container div & the first div has a border on the right. It works correctly WITHOUT the border, but when I add the border it all messes up & the text inside the container on the right displays itself under the border from the other div.
To show you what I mean here is a picture:
Here is my code:
<div style="margin: 0px auto; width: 500px; border: 1px solid #000;">
<div style="width: 500px; border-bottom: 1px solid #000;">
<div style="float: left; width: 250px;">Resolution/Megapixels</div>
<div style="float: right; width: 250px;">Average Quality Size/Best Quality Size</div>
<div style="clear: both;"></div>
</div>
<div style="width: 500px; border-bottom: 1px solid #000;">
<div style="float: left; width: 250px; border-right: 1px solid #000;">0.5 megapixels</div>
<div style="float: right; width: 250px;">3x5 inches/NA</div>
<div style="clear: both;"></div>
</div>
</div>
Edit:
Please disregard. Worked it out as soon as I posted this.
You're border is making the box too wide. Need to set the left div (with the border) to 249 so that it adds up to 250px with the border.
it is because adding a boarder to an element will add the border width to the elements width so your border is making the "3x5 inches" is actually 251px wide forcing it down as it can't fit next to a 250px width element in a 500px container, just reduce one of the 250px divs by 1px to 249px
NVM... I'm a fool. Realized right after I posted this I had to decrease the first div's size by 1 because of the border size.
I've got some problems while trying to lay out my site. I'm using Blueprint Framework and it happens when I apply borders to my div. Since their width are controlled by span-XX (or grid-xx as I noticed in 960gs), the moment I apply borders to any div element I have it goes out of the grid as seen in these images Click to zoom
Click to zoom
The only way I know to fix it is to change element's width, but then the framework's grid purpose finishes 'cause I won't have the span-XX classes anymore. Is there any other way to fix it?
If I understand it right, you have a span-24 or something similar and want to add a border to it, right? My preferred way of doing it is
<div class="span-24">
<div class="box">here</div>
</div>
and add the border to the box class for above snippet.
If you don't want to nest divs, you can create a few additional classes for bordered columns. I'm using 1px borders, so I created classes like:
.with-border-first {
border: 1px solid red;
margin-right: 8px;
}
.with-border {
border: 1px solid red;
margin-left: -1px;
margin-right: 9px;
}
.with-border-last {
border: 1px solid red;
margin-left: -2px;
}
There should be one more if you want borders around divs spanning all columns (eg. 24 in blueprint).
I then use those classes together with the spans, for example:
<div class="span-8 with-border-first">
...
</div>
<div class="span-8 with-border">
...
</div>
<div class="span-8 last with-border-last">
...
</div>
I have 2 nested divs and outer one has width:100%
<div id="#outer" style="width:100%; border:1px">
<div id="#inner" style="width:100%; border:1px; margin:4px">
something inside ...
</div>
</div>
But in this case inner div exceeds width of outer by 8px (margins).
How to make inner div to get width of outer div minus 8px margin?
P.S. All styles are in separate classes in my case, here I putted CSS into style attributes just for simplification.
Taking away the width on the inner div should work, width: auto; will work with margins, and expand to the maximum horizontal area:
<div id="#outer" style="width:100%; border: solid 1px red;">
<div id="#inner" style="border:solid 1px green; margin:4px">
something inside ...
</div>
</div>
Here are some styles that work if you remove the ones directly on the elements. I used auto on the inner CSS and a margin-right = 8px. To make it easier to see I made the inner green and the outer black.
#outer
{
width: 100%;
border: 1px solid black;
}
#inner
{
width: auto;
border: 1px solid green;
margin-right: 8px;
}