I have three divs inside one div.
<div class="parent">
<div class="child"> Text</div>
<div class="child">Text</div>
<div class="child">Text</div>
</div>
I want the child divs to fill up the width of the parent (the combined width of the children should be the parent). However, this is not happening, I'm falling short. I think this is because the child divs are setting width based on their content.
How do I achieve what I want?
CSS-
.child {
background: white;
color: #a7a9ac;
cursor: pointer;
font-size: 15px;
border-right: 1px;
border-top: 0;
border-bottom: 0;
border-left: 0;
border-style: solid;
border-color: #faded-grey;
padding-right: 10px;
margin: 0 auto;
height: 100%;
}
.parent {
border-top: 1px;
border-left: 0;
border-bottom: 1;
border-style: solid;
border-color: #faded-grey;
border-right: 0;
width: 100%;
margin-right: 0px;
height: 80px;
}
If you know there will always be three children, you can simply use:
.parent > .child {
float: left;
width: 33%;
}
.parent {
overflow: auto; /*or whatever float wrapping technique you want to use*/
}
If you do not know how many children there are, you will need to use CSS tables, flexbox, or perhaps combine inline-blocks with text-align: justify.
You can add these three properties to the .child CSS rule:
width:33%;
float:left;
box-sizing: border-box;
The last line makes sure it will also work when you add borders, padding and margin to the boxes.
ONLINE DEMO
Ps: not directly related but there is also an error in the border-bottom for parent, corrected in fiddle above. When you use non-0 value you need to specify unit:
border-bottom:1px;
I needed for my solution to accommodate a variance in the number of elements for them to be completely responsive.
I discovered an interesting solution to this. It essentially displays like a table. Every element shares available width, and this also works for images very well:
http://jsfiddle.net/8Qa72/6/
.table {
display: table;
width: 400px;
}
.table .row {
display: table-row;
}
.table .row .cell {
display: table-cell;
padding: 5px;
}
.table .row .cell .contents {
background: #444;
width: 100%;
height: 75px;
}
I'm surprised that no one suggested the css3 solution using flex namely:
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
flex: 1;
}
Related
I tried by using display inline-block to achieve 3 columns but 3rd column comes at separate row:
.wrapper {
width: 100%;
}
.column {
display: inline-block;
min-height: 150px;
width: 33.33%;
border: 1px solid black;
min-width: 300px;
margin-bottom: 8px;
}
<div class="wrapper">
<div class="column">abc</div>
<div class="column">def</div>
<div class="column">ghi</div>
</div>
Not able to figure out the reason.
I dont know this is exactly what you need , i have remove the default whitespace of the inline-block using font-size:0 and add box-size property you dont need to change the width 33.3% to 33% the width please check the snippet
.wrapper {
width: 100%;
font-size: 0;
}
.column {
display: inline-block;
min-height: 150px;
width: 33.33%;
border: 1px solid black;
margin-bottom: 8px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
}
<div class="wrapper">
<div class="column">abc</div>
<div class="column">def</div>
<div class="column">ghi</div>
</div>
By Default inline-block count space as a element. You can do this in two different ways:
Method (Using Font Size)
*,*:after,*:before {
box-sizing: border-box;
}
.wrapper {
width: 100%;
font-size:0px;
}
.column {
display: inline-block;
min-height: 150px;
width: 33.33%;
border: 1px solid black;
/*min-width: 300px;*/
margin-bottom: 8px;
font-size:16px;
}
<div class="wrapper">
<div class="column">abc</div>
<div class="column">def</div>
<div class="column">ghi</div>
</div>
Method Removing extra Space
*,*:after,*:before {
box-sizing: border-box;
}
.wrapper {
width: 100%;
}
.column {
display: inline-block;
min-height: 150px;
width: 33.33%;
border: 1px solid black;
/*min-width: 300px;*/
margin-bottom: 8px;
}
<div class="wrapper">
<div class="column">abc</div><!--
--><div class="column">def</div><!--
--><div class="column">ghi</div>
</div>
As per your comment you want margin-right:5px and achieve same thing. for this you can use width in calc format. check below snippet
*,*:after,*:before {
box-sizing: border-box;
}
.wrapper {
width: 100%;
}
.column {
display: inline-block;
min-height: 150px;
width: calc(33.33% - 5px);
width: -moz-calc(33.33% - 5px);
width: -webkit-calc(33.33% - 5px);
border: 1px solid black;
/*min-width: 300px;*/
margin-bottom: 8px;
margin-right: 5px;
}
<div class="wrapper">
<div class="column">abc</div><!--
--><div class="column">def</div><!--
--><div class="column">ghi</div>
</div>
Use Table for it, Best Option
No width, No Float
table{table-layout:fixed;width:500px;border-collapse:collapse;text-align:center;}
<table border="1">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
By default browser renders a gap between two div which are positioned inline.
Making the parent width:100%, and children width:33.33% will not make children fit in the parent, because DOM calculates the gap between child div.
To make the child div fit the parent, you need to modify the width smaller than 33.33%.
If you still want to use 33.33% width. Try this
Link For reference
Unexpected gap between div inline-block
hope this helps..
One simple way to solve this issue is to set the .wrapper to display: table; and set its children to display: table-cell;. See the example below for the outcome.
.wrapper {
width: 100%;
display: table;
}
.column {
display: table-cell;
min-height: 150px;
width: 33.33%;
border: 1px solid black;
min-width: 300px;
margin-bottom: 8px;
}
<div class="wrapper">
<div class="column">abc</div>
<div class="column">def</div>
<div class="column">ghi</div>
</div>
If you are working in bigger screen like (1600,1920) then please use media query. And nothing to do any changes in margin and other as well.
Please update this property
For < 1366 screen resolution use this css
width:32.90% //instead of 32.90% you may use width: 32%;
For > 1366 width:33% is working
in .column class
width: 33%;
So column class look like
.column {
display: inline-block;
min-height: 150px;
width: 33%;
border: 1px solid black;
min-width: 300px;
margin-bottom: 8px;
}
Because it's 1px border surrounded to div.And their is default Margin:8 to body tag.
Width:33% is not working in 1366 screen resolution. So here you must need to use width:32.90% either 32%
Do change in Width and add Box-Sizing will help you.
.column {
display: inline-block;
min-height: 150px;
width: 33.1%;
border: 1px solid black;
min-width: 300px;
margin-bottom: 8px;
box-sizing: border-box;
}
Try keeping the div in one line in your editor.
<div class="wrapper">
<div class="column">abc</div><!--
--><div class="column">def</div><!--
--><div class="column">ghi</div>
</div>
You can use flex, flex is very good to make responsive div. It's a simple example.
--- HTML ----
<div class="flex-wrapper">
<your-element class="item"> 1 </your-element>
<your-element class="item"> 2 </your-element>
<your-element class="item"> 3 </your-element>
</div>
--- CSS ---
.flex-wrapper {
display: flex;
flex-wrap: wrap; // if you want to lots of items, will be wrapped
}
.item {
width: 33.3%;
}
and if your items have margin, you can calculate that like this.
.item {
margin: 5px;
width: calc(33.3% - 10px);
}
Example :
I hope will be helped you.
Use the following properties to your column class
.column {
display: inline-block;
min-height: 150px;
width:32%;
float:left;
margin-left:4px;
border: 1px solid black;
min-width: 300px;
margin-bottom: 8px;
}
Reason
float:left; property will align your div's on left hand side
width:32%; property will give width of 32 % instead of 33.33% as
1px you are assigning to border, which needs to be accommodated from
the width itself.
margin-left:4px; property will add spacing between divs, this is
for nicety.
Your column class needs a couple of minor fixes, float and width changes:
.column {
display: inline-block;
float: left;
min-height: 150px;
width: 33%;
border: 1px solid black;
min-width: 300px;
margin-bottom: 8px;
}
My second inner div position is weirdly adjusted when my first inner div have a long link text. How to fix it?
My html code:
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
My css code:
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
link to the picture of the div:
https://www.dropbox.com/s/9zs4mgj7izuqsp1/question.png?dl=0
The problem is with your CSS. Particularly the .div-wrapper div
You need to change the display setting from inline-block to inline-table to get it inside the cell. You mentioned that you wanted the box inside the larger box, but you need to clarify how exactly you want the inner boxes to be placed inside the larger box (ex: small gap between the boxes, both perfectly fit inside the large box with equal sizes)
Just changed inline-block to inline-flex for your inner div and looks fine.
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-flex;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
Just have to fix this, I don't think any solution here explains why the problem exists. Just to add up, the problem with this is because vertical-align is set to baseline by default.
What you have to do is set the vertical-align to top
Insert it in your CSS:
.div-wrapper div {
vertical-align: top;
}
Link to solution: https://jsfiddle.net/Lnvgkfz3/
Small changes in CSS
.div-wrapper {
border: 1px solid black;
width: auto;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 190px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
This is a simple piece of code, but the solutions I've tried for this problem haven't been working.
<!DOCTYPE html>
<head>
<style>
#ONE {
float: left;
border: 1px solid red;
width: 500px;
height: 50px;
}
#TWO {
float: left;
border: 1px solid yellow;
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<header>
<div id="ONE"></div>
<div id="TWO"></div>
</header>
</body>
</html>
Upon resizing the browser, the "TWO" div falls below "ONE". I want to be able to keep the divs horizontal. Without resizing them based on screen width, I haven't found a suitable way to keep them horizontal on one line.
https://jsfiddle.net/hra5t6v0/
In addition to the answer by #connexo for more modern broswers that support flexbox.
* {
box-sizing: border-box;
}
header {
display: flex;
}
#ONE,
#TWO {
height: 50px;
flex: 0 0 500px;
}
#ONE {
border: 1px solid red;
}
#TWO {
border: 1px solid green
}
<header>
<div id="ONE"></div>
<div id="TWO"></div>
</header>
Again, this forces a scrollbar due to overflow at widths less than 1004px (or 1000px if using box-sizing:border-box).
JSFiddle Demo
A couple of advantages.
Firstly, the default for flexbox is nowrap so you don't have to explicitly state it.
Secondly, it doesn't suffer from the white-space issue requiring a the font reset that is often employed.
Note: In fact, you could use both techniques and the flexbox will override the inline-block if the broswer supports it....progresive enhancment!
JSfiddle Demo (both)
What you need is a combination of display: inline-block; and white-space: nowrap;.
This way you can stick to your fixed widths and the two div will stay in one line (which of course causes a horizontal scrollbar to appear if the viewport width becomes smaller than 1004px).
header {
font-size: 0; /* solves unwanted space between #ONE and #TWO */
white-space: nowrap; /* this makes inline-block children not wrap */
}
#ONE, #TWO {
display: inline-block;
font-size: 14px; /* reset font-size on children to whatever you need */
height: 50px;
width: 500px;
}
#ONE {
border: 1px solid red;
}
#TWO {
border: 1px solid yellow;
}
https://jsfiddle.net/hra5t6v0/3/
Here you go http://jsfiddle.net/DIRTY_SMITH/1j7xter3/10/
header{width: 1000px;}
#ONE {
float: left;
background-color: red;
width: 500px;
height: 50px;
}
#TWO {
float: left;
background-color: blue;
width: 500px;
height: 50px;
}
FIDDLE
.a,.c
{
width: 100px;
height: 300px;
background-color: red;
display:inline-block;
}
.b
{
background-color: gray;
display:inline-block;
border: 1px solid;
}
.main
{
width:100%;
display:inline-block;
height: 300px;
}
Why does the div b is at the bottom. Please set height at the fiddle and check. It ll grow down. Does anybody know the reason?
inline-block default value for vertical-align in CSS is baseline. You need to set the vertical-align property to fix that.
.b
{
background-color: gray;
display:inline-block;
border: 1px solid #ccc;
vertical-align:top;
}
DEMO
Add vertical-align: top; rule to class b or all the classes that have the rule display: inline-block. display: inline-block is by default bottom aligned.
you can use table-cell instead of inline-block;
.a,.c
{
width: 100px;
height: 300px;
background-color: red;
display:table-cell;
}
.b
{
background-color: gray;
display:table-cell;
position: relative;
border: 1px solid;
vertical-align:middle;
}
.main
{
width:100%;
display:table;
height: 300px;
}
Jsfiddle
inline-block behave as the block level when your browser will be re-sized larger or if your contents exceeds than its width while display: table-cell; won't. You'll also find the gap between block when you apply display: inline-block;
more can be read on this question.
question
There are rules in display: in-line block that mess it up in your case. Just change them to float: left as in this jsfiddle
.a,.c
{
width: 100px;
height: 300px;
background-color: red;
float: left;
}
.b
{
background-color: gray;
float: left;
border: 1px solid;
}
.main
{
width:100%;
float: left;
height: 300px;
}
You don't have any contents on first and last divs.
Because all the divs are displayed inline-block the default position will go to baseline. Try adding some contents to the .a and .c divs, you will see different behaviors.
When you are all setup with the contents you need to adjust the vertical-align to have your desired look.
I have this JSFiddle. Can someone explain, why is the anchor position misaligned relative to its siblings? I know I can correct it with position relative and negaitve top offset, but I don't understand, why it is like this in the first place.
HTML:
<div class="container">
<div class="left"></div>
Some link
<div class="right"></div>
</div>
CSS:
.container {
height: 25px;
white-space: nowrap;
}
.container .left {
border: 1px solid black;
display: inline-block;
margin: 0;
height: 25px;
width: 80px;
padding: 0;
}
.container .right {
border: 1px solid black;
display: inline-block;
margin: 0;
height: 25px;
width: 80px;
padding: 0;
}
.container a {
display: inline-block;
border: 1px solid black;
height: 25px;
width: 300px;
margin: 0;
}
The reason of this behaviour is due to the absence of text inside your .left and .right elements.
By default inline-block elements have vertical-align: baseline, but since you have empty elements there's no baseline, so they will be automatically aligned to the parent baseline (if you add some text inside them — even a — you would istantly solve the problem)
In order to prevent this behaviour you could also set a common vertical-align to all .container children.
You can add
vertical-align: top;
to .container a
This wil align the anchor with the divs.
You need to provide vertical-align property when you are declaring an inline-block.
Here you go.
WORKING DEMO
The CSS Change:
.container a {
display: inline-block;
border: 1px solid black;
height: 25px;
width: 300px;
margin: 0;
vertical-align:top;
}
You can use so many Option
1. Remove Display:inline-block and add float:left
Here the Demo
2. Use css vertical-align:top
Here demo