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.
Related
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 ...
Some html:
<div style="height: 300px">
<div id="inner">
<div id="title">
...
</div>
<div id="content">
....
</div>
<div>
..another div
</div>
</div>
</div>
I want my inner div height to be not greater than parent div's and if it is greater then content div should have scroll, but if it is smaller it should be the same size with it's content.
I've tried to set inner's max_height=100%, but I can't make my content have scroll.
I want to do it without js
UPD: I do not know main div's height (300px is not constant)
UPD2: My main div has "max-height: 100%", so I do not know exact value
Demo:
http://jsfiddle.net/kzfRk/7/
Not sure I understand, but if your scroll bars are not appearing try:
#inner{overflow-y:scroll;}
Is this what you had in mind? (colours are just for ease of viewing) See live here.
css
.container{
height: 300px;
overflow: hidden;
border: 1px solid #000;
}
#inner{
max-height:300px;
overflow-y: auto; border: 1px solid #f00;
}
#title{ background-color: #eed;}
#content{background-color: #fee;}
html
<div class='container'>
<div id="inner">
<div id="title">
...
</div>
<div id="content">
....
</div>
<div>
..another div
</div>
</div>
</div>
Do you have a live example? It's difficult to work out what you are trying to do.
Do you want the parent div to fill the screen and the content to scroll withing it? If so, give your parent div a height of 100% and try applying the following style to your inner div:
height:100%; min-height: 100%; overflow:auto;
You set your height then use overflow to control the scrolling.
#inner{max-height:100%;overflow-y:scroll;}
Example: http://jsfiddle.net/calder12/drC3L/ Change the size of the outer div to anything you want, if there is too much content the inner div will scroll.
You need to set the inner div maximum height the same as the root div height. Using your fiddle, copy and paste the CSS below into your CSS file and it will work...
.container{
max-height: 100%;
border: 1px solid #000;
}
.inner{
max-height: 100px;
overflow-y: auto; border: 1px solid #f00;
}
.root{
height: 100px;
border: 1px solid;
}
I have these div, one floats left and the other floats right but they are so spaced apart i want them to be a little closer, i tried setting margins but that didn't work. Can anyone help
here is the css
.right{float:right; margin-left:-200px;}
.left{float:left;}
.date{
width:80px;
margin: 50px 90px 0px 200px;
padding: 0px 0px 0px 0px;
}
.entry {
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
border-bottom: 0px solid #cccccc;
font-family:eurofurence;
font-size:17px;
width:610px;
background:#000;
}
set
margin-right:200;
for .right
or you can use
position and left or right attribute for style like this
.left{
position:relative;
float:left;
left:100px;
}
DEMO
Try this css :
.left{ float:left;}
.right{float:left; margin-left:200px;}
Note that there's a bug in the current specifications for left-/right-floatting elements with their vertical margins: these vertical margins DO NOT collapse into the vertical margins of non-floatting elements just above them, only with those floatting below them.
It is incoherent... And sometimes the behavior of these vertical margins are not the same across browsers (some will collapse normally).
This creates unbalanced vertical alignment of these floatting elements with non-floatting elements just beside them:
<div style="border:1px solid black;margin:10px">Non-floatting above.</div>
<div style="border:1px solid black;margin:10px;float:left">Floatting on the left.</div>
<div style="border:1px solid black;margin:10px;float:right">Floatting on the right.</div>
<div style="border:1px solid black;margin:10px">Non-floatting in the middle.</div>
<div style="border:1px solid black;margin:10px;clear:both">Non-floatting below.</div>
You'll note that the 3 blocks on the middle are not aligned: the floatting blocks on the left and right are unexpectedly positioned 10px below the central non-floatting block...
But then the block below (with "clear:both") may be shifted down (but this clearing will ignore the bottom margins of the floats before, these floatting bottom margins may still participate to the collapse of the top margin for the element below.
So top margins of floats are not working as expected: it's not possible to create a deisgn where floats will adopt a correct top margin, coherent with non-floatting elements designed to be just beside them if these non-floatting elements also need the same margins.
A work around is to encapsulate all blocks in the middle row in a parent blocks with its own vertical margin, and all blocks in in the middle must not have any vertical margin. And then this creates problems if all these floats do not fit on the row, some will "wrap" and won't have any margin!
The only work around is then to encapsulate all central elements inside a parent block with NO margin, not participating to the collapse of vertical margins with contents above or below them, but then all elements in the middle need to set their margin. In that case there's no way to allow the correct collapse of vertical margins of the central row with vertical margins of rows that are just above or below the middle row.
<div style="border:1px solid black;margin:10px">Non-floatting above.</div>
<div style="position:relative">
<div style="border:1px solid black;margin:10px;float:left">Floatting on the left.</div>
<div style="border:1px solid black;margin:10px;float:right">Floatting on the right.</div>
<div style="border:1px solid black;margin:10px">Non-floatting in the middle.</div>
<div style="clear:both"></div>
</div>
<div style="border:1px solid black;margin:10px">Non-floatting below.</div>
i have following block of the code on my page
<div style="width:100%; ">//div0
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; ">//div1
Image1
</div>
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; ">//div2
Image 2
</div>
</div>
what i want is, these two div should combine to make a larger div. as their width is divided to 50% each, they should be positioned LEFT AND RIGHT TO EACH OTHER, but in reality, the div2 is positioned BELOW the div1
can somebody explain me what should i do? and what is the problem with my simple code?
This is a very basic css issue. What you should look into is the float property in CSS. Without floating, all elements on the page will be positioned one after another.
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; float: left;">//div1
Image1
</div>
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; float: right;">//div2
Image 2
</div>
That should achieve what you want.
EDIT: actually the above wouldn't work either. Because you have a border. Think about is this way. Your page has 100% width. If your page is 1000px wide. Your divs will each take up 50% or 500px of the screen estate. Your border will take up 4 x 2 = 8px or 0.8% of the page. In total you'll add up to 101.6% of the page. Which will force the divs to load one after another.
To actually witness the effect of floating left and right, remove the border or reduce the width:
<div style="width:45%; background:#f1f1f1; border:4px solid #fff; float: left;">//div1
Image1
</div>
<div style="width:45%; background:#f1f1f1; border:4px solid #fff; float: right;">//div2
Image 2
</div>
<div style="width:50%; background:#f1f1f1; float: left;">//div1
Image1
</div>
<div style="width:50%; background:#f1f1f1; float: right;">//div2
Image 2
</div>
Also note that your depending on your page width, your percentage will have different effects. The 45% and 4px border isn't going to play along nicely all the time. If you want full screen perfectly positioned left and right box, it's better to do it without the border and do additional styling inside each 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;
}