I've got a simple question which hopefully has a simple answer. It seems basic but I just can't get my head around it.
So, I've got four boxes arranged in a container:
div {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.wrapper {
box-sizing: content-box;
height: 600px;
width: 600px;
margin: 100px auto;
border: 2px solid gray;
}
.box-container {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.box {
width: 300px;
height: 300px;
padding: 0px;
}
.c {
background-color: cyan;
}
.y {
background-color: yellow;
}
.m {
background-color: magenta;
}
.k {
background-color: black;
}
<div class="wrapper">
<div class="box-container">
<div class="box c"></div>
<div class="box y"></div>
<div class="box m"></div>
<div class="box k"></div>
</div>
</div>
I've applied box-sizing: border-box; to the divs, but for some reason padding is having no effect at all. If I use margin then it makes the divs too big for the wrapper, and they move position.
What am I missing here?
Thanks in advance
Jamie
Your HTML & CSS is correct. If you need padding on all the .c .m .y .k boxes, then use
.box {
width: 300px;
height: 300px;
padding: 10px;
border: 10px solid #000; //border also works
}
Related
I have a fiddle, please check it here: https://jsfiddle.net/p2oe6s7w/
I need the green box to stretch horizontally and take all the remaining space from the yellow box which has fixed width. I can gain it only setting up the green box say 90% of width which I don't like because it's always different - https://jsfiddle.net/p2oe6s7w/1/ . I just want these 2 blocks staying side by side.
.left {
background: green;
border: 1px solid blue;
float: left;
width: 90%;
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
float: left;
}
<div class="container">
<div class="left">
<pre>
dkdkdkd
dkdkdkdkd
fjfjf
fjfjfj
</pre>
</div>
<div class="right">
<button>
dfdf
</button>
</div>
</div>
Another thing to know is there is a list of containers setting vertically. So I don't think that absolute positions would work.
Pure css only please.
Simply use flex like this:
.container {
display: flex;
align-items: flex-start;
}
.left {
background: green;
border: 1px solid blue;
flex: 1; /* This will make your element fill the remaining space*/
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
}
<div class="container">
<div class="left">
<pre>
dkdkdkd
dkdkdkdkd
fjfjf
fjfjfj
</pre>
</div>
<div class="right">
<button>
dfdf
</button>
</div>
</div>
You can use this CSS:
html, body {
margin: 0;
}
* {
box-sizing: border-box;
}
.left {
background: green;
border: 1px solid blue;
float: left;
width: calc(100% - 60px);
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
float: left;
}
The essential line is width: calc(100% - 60px);, i.e. the full width minus the width of the yellow DIV, but you also need the other stuff ( box-sizing: border-box; etc.) to make everything fit.
https://jsfiddle.net/mLkjv565/1/
Use below css
.left {
background: green;
border: 1px solid blue;
float: left;
width: calc(100% - 60px);
}
.right {
background: yellow;
width: auto;
border: 1px solid red;
float: left;
}
Please check it here. fiddle
This question already has answers here:
How do you float elements without a vertical gap?
(9 answers)
Closed 5 years ago.
Is there a technique (codified or hacky) to get floated blocks to fill-in upwards as well as their float direction.
So that something like -
Becomes
I realize this is accomplished by javascript libraries like Masonry.
Just wondering if there are any CSS approaches to accomplish this or something similar.
Related codepen
https://codepen.io/2nj2nu7p9oVLGXKS4tIpu8eILcmoXg/pen/QOdmqw
body * {
box-sizing: border-box;
}
.wrapper {
max-width: 500px;
background: limegreen;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.block {
height: 100px;
background: lightblue;
width: 250px;
float: left;
border: solid 2px;
&:nth-child(even) {
background: blue;
height: 150px;
}
}
I simply just made any lightblue (odd) elements float: left and any blue (even) elements float: right
How does this look:
body * {
box-sizing: border-box;
float: left;
}
.wrapper {
max-width: 500px;
background: limegreen;
}
.block {
height: 100px;
background: lightblue;
width: 250px;
border: solid 2px;
vertical-align: top;
}
.block:nth-child(even) {
float: right;
background: blue;
height: 150px;
}
<div class="wrapper">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
http://codepen.io/anon/pen/OMLLwB
#news {
width: 85%;
margin: 0 auto;
}
#news ul {
list-style: none;
margin: 0;
padding: 0;
}
#worldMap img {
width: 100%;
}
.newspiece {
margin-bottom: 2.5%;
padding: 20px;
background-color: #90C3D4;
height: 130px;
}
.newspiece h3 {
border-bottom: 3px solid black;
margin-bottom: 10px;
}
#media(min-width: 600px) {
.newspiece {
width: 25%;
margin-left: 5%;
display: inline-block;
vertical-align: top;
overflow: hidden;
}
.newspiece:first-child {
margin-left:0;
}
}
Am i missing something here? the width the total container (#news) is 85%, the width of each item is 25%, and two of them have a 5% left margin, total sums to 85%, then why do i resize it, the rightmost column goes down?
i have changed your html/css. this is a cleaner solution and is suported among all browsers
html:
<div class="flex">
<div class="box">
<h3>Title</h3>
<p>Content</p>
</div>
<div class="box">
<h3>Title</h3>
<img src="http://www.placecage.com/400/300" alt="">
</div>
<div class="box">
<h3>Title</h3>
<p>Content</p>
</div>
</div>
css:
.flex {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.box {
width: 300px;
margin: 10px;
padding: 20px;
background: #90C3D4;
}
.box h3 {
padding-bottom: 5px;
border-bottom: 3px solid black;
}
.box img {
max-width: 100%;
}
* { box-sizing: border-box; }
The padding adds to the total width of the element if box-sizing: border-box is not used.
body {
background-color: #E6E6FF;
}
#header {
padding-top: 50px;
text-align: center;
height: 100px;
}
#footer {
text-align: right;
}
#navMenu {
background-color: #42424C;
text-align: center;
border-style: solid;
border-color: #42424C;
padding:10px;
}
#leftside {
width:200px;
float:left;
min-height: 500px;
border-style: solid;
border-color: #42424C;
}
#content {
border-style: solid;
border-color: #42424C;
padding: 10px;
min-height: 500px;
}
<div id="header">Header</div>
<div id="navMenu">Menu</div>
<div id="leftside">left side</div>
<div id="content">content</div>
<div id="footer">footer</div>
how it looks:
My Problem:
See the red arrow in the picture the #content goes over the #leftside I want the #content to start after #leftside how can I do this? Also I wand #leftside and #content to always be the same height, I can not set fixed height because thre can be a lot of stuff in content and it might be long and I want my #left side to last until #content ends and #footer begins is it possible to do so? Any help appreciated!
you can do it by js like this
<script>
var content=document.getElementById('content').style.height;
var leftside=document.getElementById('leftside').style.height;
if(left>right)
{
document.getElementById('content').style.height=leftside;
}
else
{
document.getElementById('leftside').style.height=content;
}
If you don't care for IE6 and IE7 users, simply use display: table-cell for your divs:
check here
Note the use of wrapper with display: table.
For IE6/IE7 users - if you have them - you'll probably need to fallback to Javascript.
One way of keeping the sidebar the same height as the content is to display them as table-cell. This way the two cells will always be the same height.
Using your code above, I have added a few extra lines of CSS and wrapped the main content in a div wrapper.
body {
background-color: #E6E6FF;
}
#header {
padding-top: 50px;
text-align: center;
height: 100px;
}
#footer {
text-align: right;
}
#navMenu {
background-color: #42424C;
text-align: center;
border-style: solid;
border-color: #42424C;
padding: 10px;
}
#leftside {
width: 200px;
min-height: 500px;
border-style: solid;
border-color: #42424C;
}
#content {
border-style: solid;
border-color: #42424C;
padding: 10px;
min-height: 500px;
}
.main-wrap {
display: table;
width: 100%;
min-height: 500px;
}
#leftside,
#content {
display: table-cell;
}
<div id="header">Header</div>
<div id="navMenu">Menu</div>
<div class="main-wrap">
<div id="leftside">left side</div>
<div id="content">content</div>
</div>
<div id="footer">footer</div>
You could also look at CSS flexbox
LIVE DEMO
Consider the following HTML and CSS:
<div class="wrapper">
<div class="first">The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement .</div>
<div class="second"></div>
</div>
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
</div>
.wrapper {
display: flex;
border: 1px solid black;
width: 300px;
height: 100px;
margin-top: 30px;
}
.first {
flex-grow: 1;
background-color: #aaa;
}
.second {
width: 80px;
background-color: #ddd;
}
and the following result:
Why the first wrapper doesn't respect .second's width: 80px?
How could I fix that using flexbox?
PLAYGROUND HERE
You need to use flex: 1; instead of flex-grow: 1;
.first {
flex: 1;
background-color: #aaa;
}
Demo
Also, I would like to point out that flexbox support isn't good as far as IE is concerned, so if anyones interested in a similar layout with more compatible option, than
<div class="wrapper">
<div class="second"></div>
<div class="first"></div>
</div>
.wrapper {
border: 1px solid black;
width: 300px;
height: 100px;
margin-top: 30px;
}
.wrapper .first {
background: red;
height: 100%;
margin-right: 80px;
}
.wrapper .second {
height: 100%;
width: 80px;
float: right;
background: blue;
}
Demo (Note that I swapped the order of the div in the DOM)