This question already has answers here:
3 inline-block divs with exactly 33% width not fitting in parent
(7 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
How can I show three columns per row?
(4 answers)
Closed last year.
Please help me understand this. Here is my HTML (body)
<body>
<main class="container">
<div class="row">
<div class="col">Sparky</div>
<div class="col">Vegeta</div>
<div class="col">Flufferpants</div>
</div>
</main>
</body>
Here is my CSS
* {
font-size: 25px;
/* box-sizing: border-box; */
}
body {
background-color: gray;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: lightgoldenrodyellow;
}
.row {
background-color: rgb(119, 103, 134);
width: 100%;
}
.col {
display: inline-block;
width: 33%;
height: 200px;
}
I am trying to have the 3 cols be on a single row, evenly spaced apart. I know this is easily done through flexbox, but I wanted to try using the width property manually.
Even when I set each of the col to be width 33%, it still rolls onto the next line. What's going on here?
https://jsfiddle.net/zd29ewb6/
Thanks
use display flex on the row
* {
font-size: 25px;
/* box-sizing: border-box; */
}
body {
background-color: gray;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: lightgoldenrodyellow;
}
.row {
background-color: rgb(119, 103, 134);
width: 100%;
display: flex;
}
.col {
width: 33%;
height: 200px;
}
using inline-block elements there always be a whitespace between the elements and you set your width 33% and adding the width of all the 3 divs its width
gets more then the parents width so it shift the third element to next line. so you can reduce the width of col like this.
.col {
display: inline-block;
width: 30%;
height: 200px;
}
Related
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
How can I make my flexbox layout take 100% vertical space?
(4 answers)
Closed 9 months ago.
I have a div of height 100%. Inside that div, there are two children: an <a> and another <div>. The child <div> also has a height of 100%. I expected setting the child div's height to 100% would make it fill up the remaining height, not copy the height of the parent element and disregard fellow children leading to unintended overflow.
Example: https://codepen.io/gamepro5/pen/Jjpaqva (why is the child class in this example overflowing it's parent with a height of 100%?)
html {
height: 100%;
}
a {
display: block;
text-align: center;
}
body {
margin:0;
width:100%;
height: 100%;
}
.parent {
width: 75%;
background-color: red;
height: 100%;
}
.child{
height: 100%;
width: 75%;
background-color: green;
/*would need to do a calc of 100% minus whatever the height of the <a> tag is, but that is annoying to do since the height of the other items can change. */
}
.child p {
text-align: center;
}
<html>
<body>
<div class="parent">
<a>Daddy Potato (king of all potatoes):</a>
<div class="child"><p>Potatoe</p><p>Potatoe</p><p>Potato</p><p>Potate</p><p>Ube</p></div>
</div>
</body>
</html>
I simply want the child div to fill up the remaining available space with it's height without overflowing.
You can achieve this with flex: Set display: flex and flex-flow: column; on the parent element, and on the child set flex-grow: 1;
html {
height: 100%;
}
a {
display: block;
text-align: center;
}
body {
margin:0;
width:100%;
height: 100%;
}
.parent {
width: 75%;
background-color: red;
display: flex;
flex-flow: column;
height: 100%;
}
.child{
flex-grow: 1;
width: 75%;
background-color: green;
}
.child p {
text-align: center;
}
<html>
<body>
<div class="parent">
<a>Daddy Potato (king of all potatoes):</a>
<div class="child"><p>Potatoe</p><p>Potatoe</p><p>Potato</p><p>Potate</p><p>Ube</p></div>
</div>
</body>
</html>
This question already has answers here:
Make child divs expand to fill parent div's width
(4 answers)
Closed 12 months ago.
https://jsfiddle.net/98oqr3jb/
I'm trying to make the green elements always fit the container. I don't want min-width: 25%; to be static, I want it to be dynamic. So if I decide I want to add another green div, it will fit the container correctly.
html,body {
background-color: rgba(40,40,40)
}
.container {
width: 100%;
height: 200px;
background-color: rgba(0,0,40);
}
.green {
/* Make min width dynamic. I.E if I have 5 items it'd be 20%, if I had 6, 16.6666667. */
min-width: 25%;
background-color: rgba(0,40,0);
height: 180px;
display: inline-block;
}
<div class="container">
<div class="green">test</div><div class="green">test</div><div class="green">test</div><div class="green">test</div>
</div>
Assign display: flex; to parent(container) and assign flex:1; to child(green)
html,body {
background-color: rgba(40,40,40)
}
.container {
width: 100%;
height: 200px;
background-color: rgba(0,0,40);
display:flex;
}
.green {
/* Make min width dynamic. I.E if I have 5 items it'd be 20%, if I had 6, 16.6666667. */
background-color: green;
height: 180px;
flex: 1;
}
<div class="container">
<div class="green">test</div><div class="green">test</div><div class="green">test</div><div class="green">test</div>
</div>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
I know many techniques for positioning divs side-by-side. However I've never understood why taking two border-box divs with width: 50% doesn't produce side-by-side divs. From what I understand of css, with margin, padding, and border out of the equation this should absolutely work.
body {
padding: 0;
margin: 0;
border: 0;
}
div {
height: 300px;
box-sizing: border-box;
display: inline-block;
margin: 0;
}
.left {
background-color: blue;
}
.right {
background-color: red;
}
.half {
width: 50%;
}
<div class="half left"></div>
<div class="half right"></div>
What am I missing?
Edit:
As many people are pointing out, display: block will not give me side-by-side behavior. This was a mis-type. I meant to make everything inline-block
First you need to understand that elements in HTML based on display property are of 2 types -
Block (eg: div, p, h1 - h6..etc)
inline (eg: span..etc)
Block level elements appear one below another, or as you may call it being stacked below each other,
whereas,
inline elements are created on the same line unless they are specifically styled as display: block OR if they encounter a <br /> tag.
SOLUTION:
You can use the property display:inline-block
Problem: It will add white spaces and put the second div on the next line even with width: 50%;. Now, there are several ways to remove whitespaces, you can try any one of them.
Use float: lefton both the div's
body {
padding: 0;
margin: 0;
}
div {
height: 300px;
}
.left {
background-color: blue;
}
.right {
background-color: red;
}
.half {
width: 50%;
float: left;
}
.half-new {
display: inline-block;
width: 50%
}
<h1>Using Float</h1>
<div class="half left"></div>
<div class="half right"></div>
<hr />
<h1>Using inline-block</h1>
<div class="half-new left"></div><!--
--><div class="half-new right"></div>
Two reasons:
Div elements are display: block by default
You have space between the elements and space takes up … um space.
Change the display property and remove the space.
body {
padding: 0;
margin: 0;
border: 0;
}
div {
height: 300px;
box-sizing: border-box;
margin: 0;
display: inline-block;
}
.left {
background-color: blue;
}
.right {
background-color: red;
}
.half {
width: 50%;
}
<div class="half left"></div><div class="half right"></div>
I have 3 section inside an div and div have a max-width: 1024px;. I make the first 1 float to left and the 3rd one float to right. But the 2nd one, I tried to set it in-between 1st and 3rd using margin: 0 auto;, it did not work...
How to align 3 divs (left/center/right) inside another div?
Here is my Jsfiddle example.
Something like [LEFT] [CENTER] [RIGHT]
here is a possible solution using CSS Calc()
The calc() CSS function can be used anywhere a <length>, <frequency>,
<angle>, <time>, <number>, or <integer> is required. With calc(), you
can perform calculations to determine CSS property values.
#wrap {
width: 100%;
max-width: 1024px;
border:1px dotted green;
font-size: 0; /*fix inline block gap*/
/* margin: 0 auto; - if you want the #wrap to be centered uncomment this line*/
}
.yolo {
width: 29.297%; /* 300px/1024px=0.29297 */
/*max-width: 300px; - this line should be commented if you want to fill the parent with the childs .yolo */
height: auto;
display: inline-block;
font-size: 16px /* show font due to font-size 0 in parent*/
}
.yolo:first-of-type {
background: yellow
}
.yolo:nth-of-type(2) {
background: gray;
width: calc(100% - 58.594%) /* width x 2 (29.297% x2) */
}
.yolo:last-of-type {
background: blue;
}
<div id="wrap">
<section class="yolo molo1">Hello</section>
<section class="yolo molo3">Hey</section>
<section class="yolo molo2">Hi</section>
</div>
UPDATE: OP's Comments below
1st:
Thanks, but i wanted to be 3 individual like there is a gap between
them
2nd:
Btw, Does calc() function in css work in every other browser?
Answer:
Snippet with gap between them
#wrap {
width: 100%;
max-width: 1024px;
border:1px dotted green;
font-size: 0; /*fix inline block gap*/
/* margin: 0 auto; - if you want the #wrap to be centered uncomment this line*/
}
.yolo {
width: 29.297%; /* 300px/1024px=0.29297 */
max-width: 300px;
margin-right:6%;
display: inline-block;
font-size: 16px /* show font due to font-size 0 in parent*/
}
.yolo:first-of-type {
background: yellow;
}
.yolo:nth-of-type(2) {
background: gray;
width: calc(100% - 70.594%) /* width: (29.297% x 2)+(6% x 2) */
}
.yolo:last-of-type {
background: blue;
margin-right:0
}
<div id="wrap">
<section class="yolo molo1">Hello</section>
<section class="yolo molo3">Hey</section>
<section class="yolo molo2">Hi</section>
</div>
CSS Calc() function works from IE9 and above.
If you switch the order of your div elements, you can get the result that you want as follows.
Float .molo1 to the left and .molo2 to the right.
Keep .molo3 as non-floated content and set the left/right margins to 35%, which is 70% divided by 2, 70% being the width left over after taking into account the width of the central div.
If needed, set margin: 0 auto to the wrapping element if you need to center it (optional).
#wrap {
width: 100%;
max-width: 1024px;
border: 1px dotted blue;
margin: 0 auto; /* if you want centering */
}
section.yolo {
width: 30%;
max-width: 300px;
}
section.molo1 {
background-color: yellow;
float: left;
}
section.molo2 {
background-color: blue;
float: right;
}
section.molo3 {
background-color: gray;
margin: 0 35%;
}
<div id="wrap">
<section class="yolo molo1">Hello</section>
<section class="yolo molo2">Hi</section>
<section class="yolo molo3">Hey</section>
</div>
Set width:33%; for each and get rid of the float:right.
Here: http://jsfiddle.net/29zatakh/
You can do this easily with Flex Box:Fiddle Sample
#wrap {
width: 100%;
max-width: 1024px;
display:flex;
}
.molo1, .yolo {
width: 30%;
max-width: 300px;
height: auto;
background: yellow;
justify-content:space-between;
margin:2em;
padding:1em;
}
.molo3 {
background: gray;
}
.molo2 {
background: blue;
}
This question already has answers here:
2 column div layout: right column with fixed width, left fluid
(8 answers)
Closed 8 years ago.
I had faced with tricky problem, I need to place two divs in one line (left, right), right must have fixed width, but left must fill free space, in another words: left div must have 100% - X pixels, right div should be X pixels.
Important point: without position relative/absolute hack.
Is there any way to achieve this result. I have tried in many ways but without luck.
here is jsfiddle
Markup
<html>
<head>
<title></title>
</head>
<body>
<style>
.container {
/* container don't matter */
width: 500px;
background-color: bisque;
height: 50px;
}
.container .left {
/* display: inline-block; */
margin-right: 50px;
background-color: burlywood;
height: 50px;
}
.container .right {
float: right;
background-color: chartreuse;
width: 50px;
height: 50px;
}
</style>
<div class="container">
<div class="left">
fill free space (100% - right)
</div>
<div class="right">
fixed width
</div>
</div>
</body>
</html>
You could do it like this:
JSFiddle - DEMO
CSS:
.container {
width: 500px;
background-color: bisque;
height: 50px;
display: table;
}
.container .left {
background-color: burlywood;
height: 50px;
display: table-cell;
width: 100%;
}
.container .right {
background-color: chartreuse;
width: 50px;
height: 50px;
display: inline-block;
vertical-align: text-top;
}