I have 2 divs inside a container like this:
<div id="container">
<div id="first">Hello World</div>
<div id="second">I want to be at the top</div>
</div>
I want to align the first div below the second div without changing the HTML. How is this possible?
Here is my CSS:
#container {
float:left;
width:100%;
}
#first {
float:left;
width:100%;
height:200px;
}
#second {
float:left;
height:200px;
width:100%;
}
I am aware I can set position:fixed to #second and align it to the top but is there any other way to achieve this?
Here is a jsFiddle.
The height of the divs are depending on the content inside. The fixed height above is only for testing.
If you know the heights of the div's, you can use margin-top to solve this problem.
#container {
float:left;
width:100%;
}
#first {
float:left;
width:100%;
background:lightblue;
height:200px;
margin-top: 200px;
}
#second {
float:left;
height:200px;
width:100%;
background:yellow;
margin-top: -400px;
}
If you do not know the heights, you can use flexbox with the order property.
#container {
display: flex;
float:left;
width:100%;
flex-direction: column;
}
#first {
order: 2;
float:left;
width:100%;
background:lightblue;
}
#second {
order: 1;
float:left;
width:100%;
background:yellow;
}
As lyjackal mentioned in another answer, you can also use column-reverse instead of column, which reverses the elements. Choose what suits you the best.
you can use flex-box and reverse the column
#container {
float:left;
width:100%;
display:flex;
flex-direction: column-reverse;
}
fiddle
all can, but this is fixed height so modify you css
#container {
float:left;
width:100%;
}
#first {
float:left;
width:100%;
height:200px;
margin-top:200px;
}
#second {
float:left;
height:200px;
width:100%;
margin-top:-400px;
}
Related
Looking to fit 2 horizontal divs in a 100% repsonsive div. So the 2 internal divs will resize when the screen shrinks/increases.
<div class="mydownloads">
<div class="warrantybook"></div>
<div class="brochurebook"></div>
</div>
.mydownloads {
width:100%;
}
.warrantybook {
padding:10px;
float:left;
display: inline-block;
margin-left: auto;
margin-right: auto;
width:45%;
}
.brochurebook {
padding:10px;
float:right;
display: inline-block;
margin-left: auto;
margin-right: auto;
width:45%;
}
You want to set the full div to 100% and the 2 internal divs to 50% and remove all padding, border and margin. I would recommend setting a "min-width" in css to ensure there is always a minimum, I've seen a lot of sites look goofy without having a minimum width on certain things.
<div class="mydownloads">
<div class="warrantybook"></div>
<div class="brochurebook"></div>
</div>
.mydownloads {
width:100%;
}
.warrantybook {
padding:0;
margin:0;
border:0;
float:left;
width:50%;
background:red;
height:50px;
}
.brochurebook {
padding:0;
margin:0;
border:0;
float:right;
width:50%;
background:blue;
height:50px;
}
https://jsfiddle.net/gn6jabb9/
This can be done easily enough with floats or inline-blocks, though the clean 'new' way is with Flexbox. Assuming you don't need support for IE < 10:
.mydownloads {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start; /* Change this to 'stretch' if you also want full height */
}
.warrantybook,
.brochurebook {
flex-grow: 1;
height: 50px;
}
.warrantybook {
background:red;
}
.brochurebook {
background:blue;
}
https://jsfiddle.net/gn6jabb9/1/
Please take a look at this fiddle https://jsfiddle.net/t2w4yd8j/1/
I have a couple of questions about this:
1) There seems to be a padding between the .top div(red) and the browser if I use the relative position. However if I change the position of .top div(red) to absolute the padding goes off. Why is that?
2) The .next div(pink) should stack after the .main div(grey). But the main div seems to be taking a bit more extra space even though the height is set to auto and there is no children in the extra space. Why is that?
Thanks
CSS
.main{
height:auto;
width:100%;
text-align:center;
background-color:#CCC;
}
.top{
position:relative;
top:0px;
left:0px;
width:100%;
height:50px;
background-color:#F00;
}
.middle{
position:relative;
top:-25px;
width:100%;
height:auto;
text-align:center;
z-index:3;
}
.midfill{
width:200px;
height:50px;
display: inline-block;
background-color:#0F0;
}
.bottom{
position:relative;
top:-50px;
left:0px;
width:100%;
height:50px;
background-color:#00F;
}
.next{
width:100%;
height:100px;
background-color:#F0F;
}
HTML
<div class="main">
<div class="top"></div>
<div class="middle">
<div class="midfill"></div>
</div>
<div class="bottom"></div>
</div>
<div class="next"></div>
1) By placing it relative, it relates to it's parent, the body tag. Remove the padding and margin from the body and HTML tag, and it fits. When you place the div absolute, it's taking out of the document flow, making it relate to the viewport. That explains the difference.
html, body { margin: 0; padding: 0; }
2) you position the div's relative, and then move them around. But the place stays reserved in the parent div. I moved the divs a bit around.
html, body {
margin: 0;
padding: 0;
}
.main{
height:auto;
width:100%;
text-align:center;
background-color:#CCC;
}
.top{
width:100%;
height:50px;
background-color:#F00;
}
.middle{
position: absolute;
margin-top: -25px;
width:100%;
height:auto;
text-align:center;
z-index:3;
}
.midfill{
display: inline-block;
width:200px;
height:50px;
background-color:#0F0;
}
.bottom{
width:100%;
height:50px;
background-color:#00F;
}
.next{
width:100%;
height:100px;
background-color:#F0F;
}
Updated Fiddle
Solution for your both problem is following. By Default it takes extra margin by removing it from body solved your issue:
body{
padding:0;
margin:0;
}
Check Fiddle Here.
How to make a div overflow when it is larger than its container when height cannot be specified?
Prerequisites:
.Wrap is variable in height and cannot have a set height.
.Head should be a fixed height.
.Body should become sccrollable when it is larger in height than its
container (.Wrap)
The plan here is to make .Body stretch to fit .Wrap causing overflow to trigger.
CURRENT CSS
.Wrap{
position:fixed;
top:10%;
left:10%;
display:flex wrap;
align-items:stretch;
max-height:50%;
max-width:50%;
overflow:hidden;
}
.Head{
height:50px;
width:100%;
}
.Body{
overflow:auto;
}
http://jsfiddle.net/x6TaR/2
You can try specifying a min-height for .Head (to prevent flexbox from forcibly collapsing it), and set the flex-flow property of the parent .Wrap element to column nowrap:
.Wrap{
position:fixed;
top:10%;
left:10%;
display:flex;
flex-flow: column nowrap;
align-items:stretch;
background:#ddd;
max-height:50%;
max-width:50%;
padding:10px;
overflow:hidden;
}
.Head{
background:#e00;
height:50px;
min-height: 50px;
width:100%;
}
http://jsfiddle.net/x6TaR/6/
The body should have a definite height. Check this fiddle.
.Body{
background:#555;
overflow:auto;
height: 150px;
}
I have a big problem with my div containers.
I have a container that the text is located in and it has dynamic height and there's a container with an icon that is supposed to adjust the height of the text. But the Container with the icon has a fixed height.
Here the link to Fiddle:
FIDDLE
You could use display:table; and display:table-cell; display attributes to get what you wanted.
CSS:
.div-table {
display:table;
width:100%;
border:3px solid #333;
}
.div-table .div-table-cell {
display:table-cell;
vertical-align:middle;
}
.div-table .text-cell {
width:80%;
padding:10px 20px;
}
.div-table .icon-cell {
width:20%;
background:#999;
color:#fff;
font-size:4em;
text-align:center;
}
Fiddle Link: http://jsfiddle.net/ravimallya/uNV8G/2/
I have a DIV that contains several other divs. I need divs to be able to peek out of the parent vertically, but not horizontally.
I thought using overflow-x and overflow-y would solve this little problem, but I can only get either x and y to show, or get them both to hide.
My CSS and HTML:
.game {
position:absolute;
width:400px; height:300px;
top:100px; left:100px;
background-color:#cccccc;
overflow-x:hidden;
overflow-y:visible;
}
.block1 {
position:absolute;
width:100px; height:100px;
top:-50px; left:150px;
background-color:#ffcccc;
}
.block2 {
position:absolute;
width:100px; height:100px;
top:150px; left:-50px;
background-color:#ccffcc;
}
<div class="game">
<div class="block1"></div>
<div class="block2"></div>
</div>
See this JSFiddle: both child divs are cut off, even though overflow-y is set to visible.
Structural Change Needed
This gets what you want if it works otherwise (I don't know if the html/css changes affect other aspects of your game). It solves it by layering the "game" so that its vertical direction fills the entire screen, and then your "window" (grey area) is set by a child div. This allows the overflow: hidden horizontally, but not have it vertically.
See fiddle.
HTML
<div class="game">
<div>
<div class="block1"></div>
<div class="block2"></div>
</div>
</div>
CSS
html, body { height: 100%; margin: 0;}
.game {
position:absolute;
width:400px;
height:100%;
top: 0;
left:100px;
overflow:hidden;
}
.game > div {
position: absolute;
top: 100px;
height: 300px;
width: 100%;
background-color:#cccccc;
}
.block1 {
position:absolute;
width:100px; height:100px;
top:-50px; left:150px;
background-color:#ffcccc;
}
.block2 {
position:absolute;
width:100px; height:100px;
top:150px; left:-50px;
background-color:#ccffcc;
}
try Changing your game class to
.game {
width:400px; height:300px;
top:100px; left:100px;
background-color:#cccccc;
overflow-x:hidden;
overflow-y:auto;
}
Thanks,
Dhiraj