I'm trying to create a div that will expand to the bottom of its container. The layout consists of two columns within a parent container. The width of both columns is a percentage, and the height of the parent container and the left column expands based on a slideshow in the left column. I'd like the height of the right column to match the left, so I can position something at the bottom. I've tried many different things, but to no avail. Here is the page:
http://whub30.webhostinghub.com/~scottl9/testindex2.html
The html is
<div id="content_section">
<div class="imgwrap">
<div class="imgwrap2">
Left-column content
</div>
<div class="playersection">
Right-column content
</div>
</div>
<div class="clearall"></div>
</div>
and the corresponding CSS is
#content_section { position:relative; min-height:400px; min-width:600px; max-height: 1000px; max-width:2000px;}
.imgwrap {position:relative; width:100%; height:auto; min-width:409px; min-height:230px; border-style:solid; border-width:medium; display: inline-block;}
.imgwrap2 {position:relative; float:left; width:70%; height:auto;}
.playersection {border-style:solid; width:30%; position: relative; float: right; border-width:medium;}
.clearall {clear:both;}`
(I added borders so I could see the divs.)
Any help would be greatly appreciated!
Try changing the height of Right Column to 100%.
.imgwrap2 {position:relative; float:left; width:70%; height:100%;}
Related
I have some floated divs in a wrapper, they should be side buy side and a fixed width. However as together the child divs are wider than the parent div this has been set to overflow:hidden;
My problem is I have to set the width of the parent div to accommodate the combined width of the child divs otherwise they are pushed onto a new line by the lack of available width.
I would like to not have to set the width of the wrapper div if possible as the child divs will be added dynamically.
Css:
.shell{
width:900px;
}
.wrap{
overflow:hidden;
height:120px;
margin-top:35px;
width:1000px;
}
.cont{
width:500px;
float:left;
position: relative;
}
Html:
<div class="shell">
<div class="wrap">
<div class="cont">
</div>
<div class="cont">
</div>
</div>
</div>
Note: The relative:position; must be kept for other reasons.
.wrap{
overflow:hidden;
height:120px;
margin-top:35px;
min-width:1000px;
width:auto;
}
if you want to view them side by side , then you should consider using inline-block
that is why we use min-width , just to initiate a width
I am trying to create two same-height columns using display:table-cell, and then place a third same-height overlay div over the top of the first two columns to hide them. The two same-height columns work. But I can't figure out how to make the third div the same height as the first two, AND be on top of them.
Goals:
Column 1 and 2 must be the same height at all times. The height
cannot be explicitly set, they must both take the height of whichever
column is taller based on the column's contents.
The cover must be the exact height and width of the row it covers, not explicitly set.
I am looking for a solution that does not use JavaScript.
Please see the following fiddle: http://jsfiddle.net/rEAYb/1/
HTML
Some filler content that should not be covered.
<div class="Table">
<div class="Row">
<div class="Cell Left">
Left<br/>
sdfgsdfg<br/>
sdfgsd<br/>
fgsdfg<br/>
sdfg<br/>
dsfgsdfg<br/>
sdfgsdfgdsfg<br/>
</div>
<div class="Cell Right">Right</div>
<div class="Cell Cover"> </div>
</div>
</div>
Some filler content that should not be covered.
CSS
.Table{
display:table;
}
.Row{
display: table-row;
position:relative;
}
div.Cell{
padding:18px;
padding-bottom:60px;
padding-top:40px;
width:480px;
display: table-cell;
}
div.Cover{
background:#444;
opacity:.5;
position:absolute;
top:0px;
left:0px;
}
div.Left{
background:green;
}
div.Right{
background:blue;
}
You can get the effect that you want as follows:
First, alter the HTML as follows:
<div class="Cover"></div>
The overlay can be a simple block element, so remove the .Cell class. Note that the .Cover element can be left empty.
The CSS needs to be adjusted as follows:
.Table {
display:table;
position:relative;
}
.Row {
display: table-row;
}
div.Cover {
background:#444;
opacity: 0.9;
position:absolute;
top:0;
bottom: 0;
left:0;
right: 0;
}
Apply position: relative to .Table instead of .Row.
On div.cover, add the additional box offsets for bottom and right.
Fiddle: http://jsfiddle.net/audetwebdesign/pyxaN/
This positioning relies on CSS 2.1 so it should pretty much in most browsers.
I have a simple HTML page and it contains two divs aligned vertically. The page is scrollable because of second div. I want the first div's position to be fixed, or nonscrollable, so that only the second div is scrollable. I added position:fixed to first div's css but this time, the second div was placed on first div, so the first div disappears under the second div.
CSS
body {
width:1000px;
height:100%;
margin:0 auto;/*body ortalama*/
}
#div1 {
height:300px;
background-color:#00CC66;
}
#div2 {
display:block;
word-wrap:break-word;
padding:30px;
font-size:72px;
background-color:#FF3;
}
HTML
<div>
<div id="div1"></div>
<div id="div2">
<p>
<!--Content Here-->
</p>
</div>
</div>
Fixed is always relative to the parent window, never an element. Once the position is set to fixed its taken out of the document flow.
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.
so in the second div2 add these
position:relative;
top:300px; /*Bump it down by the height of div1;*/
Hope it helps;
You should add a height and set overflow auto instead of scroll because with scroll you will have the scrollbar always even if the content is less than the specified height. For example:
#div2 {
background-color: #FFFF33;
display: block;
font-size: 72px;
height: 200px;
overflow: auto;
padding: 30px;
word-wrap: break-word;
}
Add this css to #div2 (you'll need to specify a height for #div2 otherwise the the scroll bar won't know where to start):
overflow-y:auto;
height:50px;
See the example here: http://jsfiddle.net/38xkn/1/ (scroll to the right first as you've set the body width to 100px, then you'll see the scroll bar for #div2).
Okay, here is another option. It's layout is somewhat different but it should get the job done. It uses absolute positioning on div1 to get it to the top, and a percentage width to stop it covering the scroll bar for div2. It's not perfect so you may need to tweek it slightly.
HTML
<body>
<div>
<div id="div1">a</div>
<div id="div2">
<p> SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSDDDDDDDDDLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLDDDDDDDDDDDDDDDDDDDDDDDDDDDDDAMSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSDDDDDDDDDLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</p>
</div>
</div>
</body>
CSS:
body{
width:100%;
height:100%;
margin:0 auto;/*body ortalama*/
overflow:hidden;
}
#div1{
height:300px;
background-color:#00CC66;
position:absolute;
top:0;
width:97.5%;
}
#div2{
display:block;
word-wrap:break-word;
padding:30px;
font-size:72px;
background-color:#FF3;
overflow-y:auto;
max-height:50px;
padding-top:300px;
}
EXAMPLE:
http://jsfiddle.net/38xkn/6/
I have the following code:
<div class="rep_tb0" style="width: 100%">
<div class="rep_tr0" style="width: 100%">
<div class="rep_td0" style="width: 100%" id="ActivityLog">Activity Log</div>
</div>
</div>
.rep_tb0 {display: table; }
.rep_tb0 {padding: 5px;}
.rep_tb0 {border-collapse:collapse; }
.rep_tr0 {display: table-row;}
.rep_td0 {display: table-cell; padding: 5px; vertical-align:top; }
.rep_td0 {border: 1px solid #666; }
What I would like is for the table that has the word Activity Log to extend horizontally to fill the DIV that contains it. Note that DIV has a width set but it may easily change. As you can see I tried setting the width in three places but none worked.
How can I make it fill the area horizontally without setting the width in pixels.
Please don't forget I'm using display: table; These are not normal DIVs :-)
I usually make a container of the size that I want and relative position; and an inner div with absolute values, like so:
<div id="container">
<div id="content">Content</div>
</div>
Then the css would look something like this:
#container{
width:70%;
min-width:600px;
height: 600px;
background:#000;
border:medium;
border-color:#CCC;
border-radius:10px;
display:block;
}
#content{
position:absolute;
display:block;
top:0;
left:0;
width:100%;
height:100%;
}
I would try two things. Get rid of the hardcoded width:100% in the rep_td0 div and then do margin:0px auto in the css without any width. If that does not work, trying giving the reptb0 div a width with pixels instead of percents and do the same for the reptd0 div.
Usually I would do this by either setting the margin to auto, using position:absolute, or via padding but unfortunately these will not work in this case. I need a div to be about 15 pixels off-center horizontally from the page. The tricky bit is it needs to scale correctly as the page widens. It seems to me that I would need to do this horizontal adjustment based on the center point, rather than the left hand side. How could I achieve this? Thanks.
Use a container div, which is centered, then its content you can give margin-left:npx - like so:
HTML
<div id="container">
<span id="green"> </span><br />
<span id="blue"> </span>
</div>
CSS
#container{width:100px; margin:auto auto; background-color:red;}
#container span{display:block; width:100%; }
#green{background-color:green; margin-left:10px;}
#blue{background-color:blue; margin-left:-10px;}
See the example coded up here - http://jsfiddle.net/Xpk8A/1/
give a wrapper with:
margin: auto;
position: absolute;
inside wrapper, put div:
position:relative;
left: -15px; (or whatever you want)
example page would help.
You can absolutely position your div and set the left attribute to 50%. Then, set the margin-left to 50% + 5px (whatever that is). This would only work if you have a fixed width on the box, however. For example, if the box is 200px wide, the margin-left would be -115px.
The key is to set width:100% and a fixed margin, as you can see in my example below
<style>
div {
background-color:red;
height:100px;
margin:0 auto;
width:100%;
margin-left:15px;
}
</style>
<div></div>
<html>
<body>
<div class="centered">
<div class="offcenter">
</div>
</div>
</body>
</html>
The css will be:
.centered
{
margin: 0 auto;
width:300px;
height:200px;
background-color:red;
}
.offcenter
{
background-color:blue;
width:285px;
height:inherit;
float:right;
}
http://jsfiddle.net/evbbq/
You can use display:inline-block for center the DIV then give your margin to it .
Like this:
.Parent{text-align:center;}
.Child{
display:inline-block;
text-align:left;
width:200px;
height:150px;
background:red;
margin-left:15px;
}
Check this fiddle http://jsfiddle.net/Xpk8A/2/
Remove margin-left:15px then click on Run button in the fiddle to see the different.