My html code is
<div style="border:1px solid red; height:140px;">
<div style="width:100px; float:left; border:1px solid blue;">
left
</div>
<div style="width:100px; float:right; border:1px solid blue; ">
right
</div>
<div style="border:5px solid green;">
middle
</div>
</div>
Why does the green border spreads to the 100% of width and covers left and right divs? How to fix it so it covers the only block that starts with the word "middle" and ends right before the word "right"?
Just tried position:relative; but it didn't help.
The example of the code is here:
jsFiddle
Write overflow:hidden to it.
<div style="border:5px solid green;overflow: hidden;">
middle
</div>
Check this http://jsfiddle.net/A6qWE/1/
Add overflow:auto
http://jsfiddle.net/A6qWE/7/ check this demo
add overflow:hidden to the style of the div containing the word middle
Add a margin to the middle div margin: 0 100px
See example of the code # jsFiddle
Related
I have a parent DIV with 3 children DIVs. I need to float left one DIV, float right another DIV, and center the 3rd DIV.
The parent width is 100% so not fixed.
I tried the following but the DIV is not centered:
<html>
<head></head>
<body>
<div style="width:100%;border:1px solid #000000;height:200px;">
<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
left:20px;float:left"></div>
<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
left:auto;margin-right:auto;float:left;"></div>
<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
right:20px;float:right;"></div>
</div>
</body>
</html>
I created a fiddle for you to test: http://jsfiddle.net/swS5x/
Thanks
Well, one of the solutions could be to simply add for the #parent add text-align:center; and on #center, remove the float:left; and add display:inline-block;
#parent {
width:100%;
border:1px solid #000000;
height:200px;
text-align:center;
}
#center {
width:50px;
height:50px;
border:1px solid #000000;
margin-top:75px;
margin-right:auto;
margin-left:auto;
display:inline-block;
}
The display:inline-block; makes the element behave much like an image would, which you can center inside a container.
http://jsfiddle.net/swS5x/2/
If you can, reorder your div elements and don't float the #center
See example
<div id="parent">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
A floated element will ignore margin: auto for the left and right margins.
I would like to float 5 pictures next to eachother; Upon hover of any of them i want the hovered over image to grow in width without pushing the images next to it Away from it. I want everything to stay in place but for the picture being hovered over to grow in size. How would i do this.
Live demo
Hi now used to this css without floating
Css
.parent{
border:solid 1px red;
width:100px;
white-space:nowrap;
font-size:0;
}
.parent img{
border:solid 1px black;
vertical-align:top;
}
HTML
<div class="parent">
<img src="http://www.gravatar.com/avatar/8193632933d351ea68ec1eae12f82057?s=32&d=identicon&r=PG">
<img src="http://www.gravatar.com/avatar/8193632933d351ea68ec1eae12f82057?s=32&d=identicon&r=PG">
<img src="http://www.gravatar.com/avatar/8193632933d351ea68ec1eae12f82057?s=32&d=identicon&r=PG">
<img src="http://www.gravatar.com/avatar/8193632933d351ea68ec1eae12f82057?s=32&d=identicon&r=PG">
<img src="http://www.gravatar.com/avatar/8193632933d351ea68ec1eae12f82057?s=32&d=identicon&r=PG">
</div>
Live demo
---------------
Updated demo
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 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 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.