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
Related
I have a container div and a content div.
markup:
<div id="container">
<div id="content">
<pre>
some <br/>
content <br/> of variable height.
</pre>
</div>
</div>
css:
#container {display:table; border:solid red 2px; width:400px; height:500px; background-color:#aaa;}
#content {display:table-cell; height:200px; width:200px; vertical-align:middle; background-color:#444}
I want to vertically align the content div, but not have it take the complete height of the container div.
Now I see other solutions for this, the ones that use 3 div's - outer, middle, inner- I don't want to do that- just 2 divs.
While the above thing works- the height of the content div is ignored- possibly because of the table-cell display value, and it fills the entire container div. How to rectify this??
Remove the display:table-cell css from your #content id css selector, then the 200 height is respected. And you have a typo in your height: 200px width:200px there is no semi-colon separating the two values, so the width is not getting applied.
#container {
display:table;
border:solid red 2px;
width:400px;
height:500px;
background-color:#aaa;
}
#content {
/*display:table-cell;*/
height:200px;
width:200px;
vertical-align:middle;
background-color:#444
}
<div id="container">
<div id="content"> <pre>
some <br/>
content <br/> of variable height.
</pre>
</div>
</div>
I'm creating an image slider. I have a parent <div> that will mask a wider child:
<div class="viewport">
<div class="strip">
<div class="item">
<img src="1.png">
</div>
<div class="item">
<img src="2.png" >
</div>
<div class="item">
<img src="3.png">
</div>
</div>
</div>
My parent has a fixed width, and will show scrollbars when content overflows:
.viewport{
width:400px;
height: 100px;
overflow:scroll;
margin-top:100px;
}
Its child, .strip, should expand to contain all of its children as a horizontal row. In the past, to ensure .strip could contain its children without clearing, I would either:
sum up the widths of a pre-determined number of children and hardcode it
sum of the widths of an unknown number of children via javascript
Since I'm targeting modern browsers, I thought maybe the problem could be solved with using flexbox:
.strip{
display: flex;
height:100px;
}
.item{
width:150px;
flex-basis:150px;
margin-right:10px;
}
It gets tantalizingly close, but all my items are stacked on top of one another:
http://jsfiddle.net/rytPP/14/
Is there someway to space them out, or is there no way to get around .viewport's width constraint?
How about just using display:inline-block; for the .item and white-space:nowrap; for the .strip?
.strip{
height:100px;
white-space:nowrap;
font-size:0;
}
.item{
width:150px;
display:inline-block;
margin-right:10px;
}
As per this fiddle...
That way you're not restricted to flexbox-supporting 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'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%;}
So I got some divs... The aim here is to play with some hide-show effects.
<div class="container">
<div class="move">
Some dynamic content...
</div>
</div>
.container {
width:100px;
height:100%;
owerflow-y:hidden;
}
.move {
width:300px;
height:100%;
float:right;
}
The issue is that in ie7 the float right doesn't work. the .move div will stick left.
Is there any way to fix this ?
Thanks.
It is because your containers width is less than the contents.
ifyou choose the width of .container bigger, you'll see the effekt is working. If you want the .move to be in the container by DOM-Tree but not on the screen, use position: absolute.
You can use text-align:right instead of float:right with your current widths(Inner DIV with More than the Outer DIV width).