For example given the following HTML structure:
<div class=container>
<div class=segment>
<div class=header>header</div>
<div class=content>bla bla...</div>
</div>
<div class=segment>
<div class=header>header</div>
<div class=content>bla bla...</div>
</div>
</div>
I tried the following CSS:
.container {
width: 200px;
height: 300px;
}
.segment {
height: 50%;
}
.content {
overflow-y: scroll;
}
Yet the weird result I'm getting looks like this:
Also see this fiddle: https://jsfiddle.net/Lyrpv0nL/
Why is that and how would I keep the segments contained inside the ... well, container? Just scrollable contents.
Ideally, I want to set the container height to a relative percentage value as well, but if I absolutely have to use absolute values, fine, let's not complicate things too much..
There are a couple issues:
the .content element needs to have a height added to it, since it shares the space with another element (.header) you need to adjust for that.
The parent container (.segment) needs to know how to size itself according to its content + padding etc. box-sizing: border-box; does the trick here.
I've updated your fiddle with a working solution: https://jsfiddle.net/Lyrpv0nL/3/
Hello your problem is that you have hardcoded values, for example the height of the container and the height of segment, so you force your elements into this.
Here is an updated Fiddle
P.S.
I was not sure if you wanted to use an overflow, but if you do, you have to add it to .segment
Ah okay, so that is what you want?
Updated Fiddle
You need to set overflow:hidden on your .segment and provide your content with a height
https://jsfiddle.net/kwjvey8n/
Related
I have the following html structure:
<div class="parent">
<img src="image.png" class="child"/>
</div>
<div class="container">Page goes here.</div>
And the following css:
.container, .parent{
position: relative;
}
.child{
display: block;
max-width: 100%;
height: auto;
position: fixed;
}
Because the image is fixed the parent's height is probably 0. Therefore the container is placed over the image. However I want to have the image fixed and the container to be placed after the image, while keeping it responsive.
Any help would be appreciated!
UPDATE: I'm trying to get the scrolling behavior shown in this JSFiddle, but to make the container always be at the bottom of the image, even if the screen width is (let's say) under 300px.
In your Fiddle, I was able to achieve the desired behavior by changing the .container property from
margin-top: 300px to margin-top:50%
You'll likely not see a change if you add a position class to the image. That's used on div tags. Try adding that class to a new div tag with which you surround your image.
Alternatively, you could add a display: block to your image, but that makes things more complicated.
I think this is what you're asking, but I'm still a bit confused.
I've got the following HTML and CSS
http://jsfiddle.net/x7zr999s/
If the browser is small enough, it gives the desired result:
But if it's big enough, there are two or more items per line:
Is there any way to prevent this without disabling float: left or enabling anything that breaks it? I want the posts to "wrap" around the original post like in the images.
This problem appears because you have a fix width on your div. In your fiddle you have given the div, a width of 100, so when the screen widther, and because your div are all floated left they fill in the extra space and that is what happen to your case.
// this code is from the fiddle you create
<div class="reply" width=100 height=100>reply 1</div>
There are some way to solve this. and the easy way is to wrap your div and put exact width you desire. so when the screen widther your floated div will remain to there same position.
This is a demo.
In the demo i put extra div before the end tag of div wrapper and have a class name blocker that help not to break your layout. if you can see in your style are class blocker style is clear:both this article explain about Clearing floats
hope this help...
You can insert you code into a wrapper and give it a maximum width:
#wrap {
width: 100%;
max-width: 1400px;
}
.op, .reply {
float: left
}
.reply {
min-width: 51%;
}
<div id="wrap">
<div class="op"></div>
<div class="reply"></div>
<div class="reply"></div>
<!-- ... more to go ... -->
</div>
Set CSS attribute max-width to the parent div. It sets the maximum width that the parent can extend to. The default width is 100% of the window size. However max-width property restricts further extension of width after the specified maximum value.
Float left wraps child elements if the required parent's width is available. In your case you can restrict it by not allowing the parent's width to extend after a certain point so that the child divs wraps in the given space i.e. in 1 column (required).
I want to equal two divs height when a div height large
example :
<div style="float:left;padding:2px;background:red;">B</div>
<div style="float:left;padding:2px;background:green;">A<br />C<br />D</div>
<div style="clear:both;"></div>
the Div 2 height larger then div one
I may have a possible solution for you:
http://jsfiddle.net/adaz/wRcWj/1/
Well, it'll probably work on ie7+ so I'm not sure if that's good enough for you.
Brief description:
1) Set position relative to the container and self-clear it (I've used overflow: hidden but you can also use clearfix).
2) Float one of the divs inside so the container will expand depending on content inside.
3) Set position absolute to one of your divs, and give it top and bottom position 0px, this will make sure that it has 100% height.
Cons:
- Lack of IE6 support
- You need to chose which div will always have less content and then position in absolute
Hope it helps!
This is typically the behavior of a table, so you can do this with display: table-cell. I based an example on Adaz's : http://jsfiddle.net/L2uX4/
Wrap the two div's whose height you are trying to equalize in a container div, i.e.
<div id="container">
<div class="column">A<br/>B</div>
<div class="column">C</div>
</div>
Set an explicit height on the container and set height=100% on the columns:
div#container {
float: left;
height: 10em;
}
div.column {
height: 100%;
background-color: red;
}
I have 2 div elements side by side that are set as inline-block. They both reside within a containing div. I have set the right div to height 100% but because the height of the containing div is dynamic it won't expand. Does anyone know how to make the right hand div (coulmn) expand to the dynamic height of the containing div?
<div class="container">
<div class="left_column">Dynamic Content In Here</div>
<div class="right_column">Side bar to expand to the height of the containing div</div>
</div>
Thanks
Oliver
After having some issues with the same problem, the simplest solution is, in my opinion, to use table-cell as the display property. It works perfectly fine!
I think you search something like this:
.container {
min-height: 700px;
}
.right_column {
min-height: inherit;
}
Also see this jsfiddle.
Try to add:
html, body
{
height:100%;
}
#container
{
min-height:100%;
}
This seems like a really amateur question, in my opinion, but nonetheless it's still a frustrating anomaly.
This is actually the 2nd part of a 2 part problem. The first part is a rather common one, involving getting an element to stretch to 100% height of its parent object. In my demo, I have the following HTML:
<body>
<div id="sbcontainer">
DIV 1
<div id="sbcontent">
DIV 2
<table id="sbmaintable" cellspacing="0">
<tr>
<td>
TABLE
</td>
</tr>
</table> <!-- END MAINTABLE -->
</div> <!-- END CONTENT -->
</div> <!-- END CONTAINER -->
</body>
I want each element here to fill all vertical space within its parent element. I tried used the following style on each of the elements (Please note that BODY and HTML are also set to 100% height in my demo):
min-height: 100%;
height: auto !important;
height: 100%;
The result was as follows:
As you can see, the outermost DIV followed the 100% height property but the rest did not. As implied in the image note, but not actually shown in this image, I tried setting the 2nd DIV (red border) to a static height of 400px to see if the TABLE within would stretch to 100% height, and it still did not.
I then found that if I removed height:auto; from each of the elements, they would follow the 100% height property, but with an unwanted side effect:
As you can see in the image, each element is now truly 100% the height of its parent element, forcing the bottom to extend beyond the boundaries of its parent. (Even in my first example, the outermost DIV with the green border extended farther than desired because there is another sibling DIV above it on the page). NOTE: After looking more carefully, I can see that the blue TABLE element is not actually the same height as its red DIV parent, but it still extends beyond its boundary. I'm not sure if this means anything, but I do notice it.
One would think that this would be an easy thing to solve, but despite my efforts, I've had no success.
If I keep only height:auto; and remove the 100% properties, this does not stretch them at all.
I have searched for solutions on this via Google and StackOverflow, and although many sites covered 100% height issues, I still haven't found an actual solution.
I am currently testing this in Firefox.
You can use absolute positioning.
#b {
width: 40em;
height: 20em;
position:relative;
background: red;
}
#c {
position: absolute;
top: 1em;
bottom: 1em;
left: 1em;
right: 1em;
background: blue;
}
<div id="b">
<div id="c">
</div>
</div>
I believe the proper solution to something like this is using a flexbox. Flexbox has great support the lately with all modern browsers.
Use following for the parent
.stretch-items {
display: flex;
flex-direction: column;
}
And for the item that should grow
.stretch-items .stretch {
flex-grow: 1;
}
Here is a codepen demonstrating it https://codepen.io/giorgosk/pen/NWWaqPO