So Ive run into this problem where overflow: hidden on a div in a container will limit the divs width when its supposed to be fluid. So basically I have a structure similar to this:
<div id="container">
<div id="leftColumn">
//content
</div>
<div id="rightColumn">
//content
</div>
</div>
In this situation, the leftColumn div is of fixed width and the rightColumn is supposed to be fluid and fill the remaining width. The problem is that when I add overflow: hidden to the rightColumn (it has a background color) the width shrinks to the min-width that Ive given it. Is there any way to make it expand to the remaining width space? Here is what I have for CSS currently:
#container {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 800px;
}
#leftColumn {
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
width: 230px;
position: relative;
float: left;
}
#rightColumn {
margin: 0px 0px 0px 250px;
padding: 10px 10px 10px 10px;
min-width: 530px;
overflow: hidden;
background: #fff;
}
Thoughts?
It works for me (FF 3.6.13). Check and see if there is anything else on the page (Styles or elements) that might be interfering. Also check different browsers. And if you are manually changing the page when testing, be sure to do a hard refresh on your browser (Ctrl-F5) to make sure that the new styles load.
It worked exactly as you described within my fiddle... shrinking to the min-width with overflow : hidden applied.
I hate nesting divs unnecessarily, but potentially this is a scenario where it may work for you?
http://jsfiddle.net/cVNaJ/
I turned your right column into a 'wrapper' where overflow : hidden content is contained within a child div, named after the original. Maybe this helps perchance?
Related
I have the following elements:
<body>
<div id="container">
<div id="sidebar1"></div>
<div id="content">
<h3>Lorem ipsum</h3>
<p>Whatnot.</p>
</div>
<div id="sidebar2"></div>
</div>
</body>
Following this style:
/* ~~ this fixed width container surrounds all other divs~~ */
#container {
width: 960px;
background-color: #FFF;
margin: 0 auto;
overflow: hidden;
}
#sidebar1 {
float: left;
width: 180px;
/*border: 2px solid black;*/
background-color: #EADCAE;
padding: 0px 0px 100% 0px;
}
#content {
padding: 10px 0;
width: 600px;
float: left;
}
#sidebar2 {
float: left;
width: 180px;
/*border: 2px solid black;*/
background-color: #EADCAE;
padding: 0px 0px 100% 0px;
}
I am trying to achieve this layout: http://jsfiddle.net/QnRe4/
But as soon as I un-comment the borders it turns into this: http://jsfiddle.net/FZxPQ/
** Solved **
The border width was added to each element's total width making them too wide to fit in the container. Removing 2x the border width from each column's width solves the problem: http://jsfiddle.net/FZxPQ/4/
CSS box-sizing to the rescue! This property
alters the default CSS box model used to calculate widths and heights of elements
The border-box value means that
the width and height properties include the padding and border
/* support Firefox, WebKit, Opera and IE8+ */
#container, #sidebar1, #sidebar2 {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
However, browser support is not 100% standardized.
As other answers have already mentioned the extra width which pushes the sidebars out of alignment is because the width calculation includes the border width. box-sizing simply tells the browser that an element with a given width/height should include any border and padding values into the final width/height calculations.
The problem is that when you add in the boarder, the size of the outer divs increased by 4, 2px on each size. So, your container needs to grow in size by 8px.
So change your container to:
#container {
width: 970px;
background-color: #FFF;
margin: 0 auto;
overflow: hidden;
}
See: http://jsfiddle.net/QnRe4/13/
When you apply the borders, that goes outer the divs, so the sidebars will have 184px width which doesn't fits to the container. try addig width: 176px
http://jsfiddle.net/QnRe4/12/
#sidebar1 {
float: left;
width: 176px;
border: 2px solid black;
background-color: #EADCAE;
padding: 0px 0px 100% 0px;
}
Like this? http://jsfiddle.net/QnRe4/3/
What's happening is that your elements are losing their block display properties when you remove the borders.
So, adding display: block to those elements resolves that.
I've also adjusted your element's widths by 4px in width to retain the layout, since removing those borders essentially reduces the space that those elements occupy on-page.
At the moment I have a layout that pulls a number of thumbnails into a grid - each is defined by a style that keeps them a fixed ratio, (roughly 16:9) which is defined by pixel dimensions (389px x 230px) but they are looking a bit small on high-res screens.
The images are actually pulled into the DIV as a background that covers 100% width and height of the DIV and then the DIV's obviously control the aspect and size.
What I am looking to do is have these DIV's dynamically resize based on the page size of the device but to keep the ratio of the DIV's.
Is this possible?
My thoughts would be to set the width based on the percentage of the page but then I'm not sure how I would set the height and keep the correct aspect ratio (due to different resolutions etc.)
What would be the best way to do this?
EDIT - Thanks for all your ideas so far, thought maybe I should show you how I'm pulling in the data at the moment.
In my HTML I've got the following code which generated the grid
<a class="griditem" href="../video.php?video=13" style="background-image:url(../video/Relentless/Relentless.jpg); background-size:100% 100%;">
<div class="titles">
<h5>Relentless Short Stories</h5>
<h6>Frank Turner: The Road</h6>
</div>
This is styled with the following CSS
.griditem {
position: relative;
float: left;
margin-right: 17px;
margin-bottom: 17px;
background-color: #777;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 389px;
height: 230px;
text-align: left;
}
.titles {
padding: 5px;
position: absolute;
bottom: 10px;
left: -1px;
right: -1px;
background: transparent url(../images/layout/white80.png) top left;
-moz-border-radius: 1px 1px 0 0;
border-radius: 1px 1px 0 0;
text-align: left;
}
The reason I'm implementing it this way is so that the Div can float over the bottom of the image.
Just a quick idea which might be useful for you.
It is based on the fact that vertical padding/margin use the WIDTH of the parent box when it is set to percentages, so it is possible to resize a div relative its parent box
http://jsfiddle.net/xExuQ/2/
body,html { height:100%; }
.fixed-ratio-resize {
width: 50%; /* child width = parent width * percent */
padding-bottom: 50%; /* child height = parent width * percent */
height: 0; /* well, it is not perfect :) */
}
If you want to put some (non-background) content into this nicely resized box, then put an absolutely positioned div inside it.
Reference:
http://www.w3.org/TR/CSS2/box.html#margin-properties and
http://www.w3.org/TR/CSS2/box.html#padding-properties says:
Margins: "The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1."
Paddings:"The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1."
EDIT
http://jsfiddle.net/mszBF/6/
HTML:
<a class="griditem" href="#" style="background-image: url(http://pic.jpg);">
<span class="titles">
<span class="name">Unicomp Studios</span>
<span class="title">Springs Buckling (2012)</span>
</span>
</a>
CSS:
.griditem {
float: left;
margin-right: 17px;
margin-bottom: 17px;
min-width: 100px; /* extremely narrow blocks ==> crap looking */
width: 30%;
background: blue no-repeat;
background-size: contain; /* from IE9 only: https://developer.mozilla.org/en/CSS/background-size */
border: 1px solid transparent; /* prevent .titles:margin-top's margin collapse */
}
.titles {
/* <a> elements must only have inline elements like img, span.
divs, headers, etc are forbidden, because some browsers will display a big mess (safari) */
display: block; /* so display those inline elements as blocks */
padding: 5px;
margin: 0 auto;
margin-top: 105%;
background: yellow;
}
.titles > span {
display: block;
}
I know this might not be the best solution, but
<html>
<style type="text/css">
#cool{
width:40%;
background:blue;
padding-bottom:10%;
}
</style>
<div id="cool" >
</div>
</html>
Here Ive used padding-bottom, to maintain its height relative to its width. U can set padding-bottom as a percentage. Hope this helped.
I have a template that shows a main image and thumbnails under it.
Each product might have a different number of thumbnail images where each image might have a different aspect ratio.
In order to make the thumbnails look nice i scaled all the thumbnails:
#product-thumbnail {
height: 100px;
}
#product-thumbnail a img {
height: 100%;
}
All of these thumbnails are in a container that is 630px wide, if i have multiple thumbnails, they are added to a second row which overlaps my description text.
i tried using the clear: both on my description div but it did not work.
jsFiddle Link: http://jsfiddle.net/7eY3M/1/
Thanks for any help!
#product-thumbnail {
display: block;
}
#product-thumbnail a img {
vertical-align: middle;
height: 100px;
margin: 5px;
box-shadow: 10px 10px 20px #909090;
-webkit-box-shadow: 10px 10px 20px #909090;
-moz-box-shadow: 10px 10px 20px #909090;
}
Move the 100px height to the images themselves, not the containing div.
Updated fiddle
~EDIT~
The better way would be to use individual dives with height 100px inside of a div each with the float:left style applied. In this style, it will keep the images in a line, while allowing them to 'wrap', instead of forcing them to overflow. This should fix everything. also note, USE display: inline-block; in your
<div id="product-thumbnail">
Failure to do so results in odd placement of the description, as dose useing display: block or disply: inline.
Css
#product-thumbnail {
display: inline-block;
min-height: 100px;
float:none;
}
.thumb
{height=100px;<br>float:left;}
<div id="product-thumbnail">
<div class="thumb">
<img src=img1>
</div>
<div class="thumb"> <img src=img2> </div>
I'm working on a new website and on one my pages I just cant get my #main div which is my page content's containing DIV to stretch long enough to cover the inner DIV's.
Please check it out and point out the parts of my CSS that need fixing. Many thanks to all.
#bikey; just right
#main {
background: none repeat scroll 0 0 #101010;
border-color: #333333;
border-style: solid;
border-width: 1px 1px 0;
margin: 15px auto 0;
overflow: hidden;
padding: 20px;
width: 920px;
}
The problem is in your #main div there are floated element's so you have to clear it first.
in the example above i write overflow:hidden & remove height:100%
Just remove height: 100% from layout.css at #main{...} (line 31 or so)
and add <br style="clear:both;" /> after <div id="content">...</div>
My css looks like this
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFFFFF;
}
div#header {
background-color: #969696;
height: 80px;
}
div#mid-bar {
background: url(images/home.jpg) left no-repeat #6f6565;
height: 200px;
}
#searchbox {
background-color: #c1c1c1;
width: 200px;
height: 180px;
margin: 10px 20px 10px 350px;
}
and my html
<div id="header">
</div>
<div id="mid-bar">
<div id="searchbox">
</div>
</div>
you can see the problem. the space between header and mid-bar which is created due to the margin given in the searchbox div.
i want this margin for searchbox within the mid-bar div... and not from header div.
I's a known bug: would use padding instead of margin. so:
div#mid-bar {
background: url(images/home.jpg) left no-repeat #6f6565;
height: 200px;
padding-top: 10px;
}
#searchbox {
background-color: #c1c1c1;
width: 200px;
height: 180px;
margin: 0px 20px 10px 350px;
}
Give padding to #mid-bar instead of searchbox margin
I have seen this happen when you don't give margins to parents and the first element, even a child that you give margin to, causes gaps in the parents by creating margins. One way I've overcome this is by using paddings on the parent containers instead of margins.
See your example here with paddings: http://jsbin.com/ememi3
If you are intent on using margins, try setting margin:0; in #mid-bar. Otherwise give #mid-bar a padding-top:10px; and remove top margin from #searchbox.
Everyone seems to agree on this one, padding will work much better then margins will. I looked into it a little and it seems Pixeline is right, it's a known bug in Firefox, hopefully they will fix it in 4.