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/
Related
I want to place two divs alongside each other. Second one to be centered and the first one to be on the left from second and to be sticked / fixed. Because of the last condition the existing solution does not work (attribute position is already used there for both divs). How can I solve this?
Something like this:
.container {
display: flex;
height:100%;
}
.left {
margin-left: auto;
width: 0;
display: flex;
justify-content: flex-end;
}
.centered {
margin-right:auto;
padding:5px;
background:green;
height:100%;
}
.left span {
position:fixed;
white-space: nowrap;
padding:5px;
background:red;
}
body {
height:200vh;
}
<div class='container'>
<div class='left'><span> some content</span></div>
<div class='centered'>centered</div>
</div>
Basically, the container has both fluid height and width. Kindly consider the following:
<div class="container">
<span class="header">Hello!</span>
<div class="box"></div>
<div class="box"></div>
</div>
Both of the box divs take say 40% height each, assume I apply 15% height for the span element and the remaining 5% for its margin-top value. As expected it will not sum up to 100% of the container height since
margin-top is calculated based on the width as far as I know. How do I calculate the margin-top percentage value in this case so all elements including the margin would sum up to the full height of the container? here's my CSS Code, thanks in advance.
.container {
height: 80%;
width: 80%;
}
.header {
height: 15%;
display: inline-block;
margin-top: 5%; /*how to calculate this correctly*/
}
.box {
height: 40%;
}
I think you can easily obtain what you want by using flexbox and margin-top:auto on header:
body,html {
height:100%;
margin:0;
}
.container {
height: 80%;
width: 80%;
display:flex;
flex-direction:column;
border:1px solid;
box-sizing:border-box;
}
.header {
flex:0 0 15%;
background:red;
align-self: flex-start; /* To have same visual behavior as inline-block */
margin-top:auto /* this will do the trick*/
}
.box {
flex:0 0 40%;
background:yellow;
}
<div class="container">
<span class="header">Hello!</span>
<div class="box">a</div>
<div class="box">b</div>
</div>
I prefer flexbox solution by #Temani, but in case you need to support old version of browsers like IE that does not support flexbox.
You can just add an empty span before header or use pseudo css element and give it a 5% height, this will give you the same margin top effect you need even for old browsers.
html,
body{
height:100%;
}
.container {
display:inline-block;
height: 80%;
width: 80%;
background-color:red;
}
.container:before {
content:" ";
display:inline-block;
width:100%;
height:5%;
background-color:red
}
.header {
height: 15%;
width:100%;
display: inline-block;
background-color:blue
}
.box {
display:inline-block;
width:100%;
height: 40%;
background-color:green
}
<div class="container">
<span class="header">Hello!</span>
<div class="box">1</div>
<div class="box">2</div>
</div>
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;
}
I have an unknown amount of divs that will be populated within an inline-block div. There's no problem when there is more than one div as it looks fine, but when there is only one div I want it to be centered in the parent. I want to try to do this without any fixed/absolute positioning and hopefully without using javascript.
In the fiddle you can see the first column, the div with "Put me in the middle" should be in the middle.
http://jsfiddle.net/Lzzyywf2/5/
<div class="inlineb">
<div class="insideInline">Hello</div>
</div>
<div class="inlineb">
<div class="insideInline">Hello</div>
<div class="insideInline">Hello</div>
</div>
.inlineb {
min-height:102px;
display:inline-block;
border:1px red solid;
vertical-align:top;
}
.insideInline {
height:50px;
border:1px solid blue;
}
Try :only-child for .insideInline. This will target the element if there is only one inside the parent. Here's my fiddle.
#wrapper {
}
.inlineb {
min-height:102px;
display:block;
border:1px red solid;
vertical-align:top;
width:126px; /*or whatever value*/
}
.insideInline {
height:50px;
border:1px solid blue;
display:inline-block;
width:37px;/*or whatever value*/
}
.inlineb .insideInline:only-child {
display:block;
margin:0 auto;
}
If you are able to manually add a class for those containers with only one child, this would work:
http://jsfiddle.net/Lzzyywf2/6/
<div class="inlineb one-child">
<div class="insideInline">Hello</div>
</div>
combined with:
.one-child:before {
content: "";
display: block;
height: 25px;
}
If you can't add a class, this will work in IE9+:
http://jsfiddle.net/Lzzyywf2/9/
.insideInline:only-child {
display:block;
margin-top:25px;
}
Credit to the OP for improving on this idea!
Flex box will make your life easier:
.flex-contain{
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
width:900px;
height:500px;
background:#000;
align-items:center;
align-content:center;
}
.flex-item {
height:200px;
width:200px;
background:yellow;
margin:0 auto;
}
http://codepen.io/cjthedizzy/pen/vEpyvR
I have a fluid container of 96% width.
I have a box inside this container which also has percentage width.
I can't get the box to center horizontally inside the wrapper. The usual margin:0 auto; isn't working - I guess because it has a percentage width.
<div id="wrapper">
<div class="box">
<img class="scales"... />
</div>
</div>
Here's the css:
#wrapper {
width:98%;
}
.box {
width:40%;
}
.scales {
width:100%;
}
The problem is probably that your image does not look centered as it is likely smaller than the 40% of it's containing div. In any case, there is no reason for margin:0 auto; not to work. Solution to center the image:
.box {
width:40%;
margin:0 auto;
text-align: center;
}
Try like this: DEMO
CSS:
#wrapper {
width:98%;
background-color:#999;
}
.box {
width:40%;
margin:0 auto;
display:block;
background-color:#ccc;
}
.scales {
width:100%;
}