I'm looking to align three divs side by side without any flexbox and grid.
This is the style that I'm looking for: Image
This is what I'm currently getting: Image
.container {
width: 600px;
border: 1px solid black;
}
.box-1 {
width: 180px;
height: 100px;
background: grey;
margin: 10px;
display: inline-block;
}
.box-2 {
width: 180px;
height: 100px;
background: grey;
margin: 10px;
display: inline-block;
}
.box-3 {
width: 180px;
height: 100px;
background: grey;
margin: 10px;
display: inline-block;
}
<div class="container">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</div>
Note: Just asking about alignment, not the border, background etc
Edit: The parent container has width 600px. It cannot be changed. And the children have 180px width and 100px height, and margin of 10px.
You can resolve it using display: flex; layout on .container class.
The default direction of flex layout is row (flex-direction: row).
.container {
width: 600px;
border: 1px solid black;
display: flex;
}
.box-1 {
width: 180px;
height: 100px;
background: grey;
margin: 10px;
display: inline-block;
}
.box-2 {
width: 180px;
height: 100px;
background: grey;
margin: 10px;
display: inline-block;
}
.box-3 {
width: 180px;
height: 100px;
background: grey;
margin: 10px;
display: inline-block;
}
<div class="container">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</div>
Hey increase the width of the container as follow:
.container {
width: 1000px;
border: 1px solid black;
}
.box-1 {
width: 180px;
height: 100px;
background: grey;
margin: 10px;
display: inline-block;
}
.box-2 {
width: 180px;
height: 100px;
background: grey;
margin: 10px;
display: inline-block;
}
.box-3 {
width: 180px;
height: 100px;
background: grey;
margin: 10px;
display: inline-block;
}
<div class="container">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</div>
or use display : flex in your container both will help....
If you dont want to use Flexbox, You can simply try increasing the width such that all 3 divs are aligned in a single line
like Aahad said...
Related
How do I achieve a responsive layout in my code?
I have four divs with different heights. The layout for the smaller screen is as expected.
For the larger screen, I want to float the second (blue) and forth (brown) divs to the left and the first (red) and third (green) divs to the right, as shown in the image.
Here is my code:
CSS
.wrapper {
border: 2px solid;
padding: 10px;
min-height: 300px;
}
.first-div {
border: 2px solid red;
height: 80px;
margin-bottom: 10px;
}
.second-div {
border: 2px solid blue;
height: 200px;
margin-bottom: 10px;
}
.third-div {
border: 2px solid green;
height: 180px;
margin-bottom: 10px;
}
.forth-div {
border: 2px solid brown;
height: 100px;
}
#media (min-width: 892px) {
.first-div {
float: right;
width: 500px;
}
.second-div {
float: left;
width: 280px;
}
.third-div {
clear: both;
float: right;
width: 500px;
}
.forth-div {
clear: both;
float: left;
width: 280px;
}
}
h4 {
text-align: center;
}
.clear-both {
clear: both;
}
HTML
<div class="wrapper">
<div class="first-div"><h4>First Div</h4></div>
<div class="second-div"><h4>Second Div</h4></div>
<div class="third-div"><h4>Third Div</h4></div>
<div class="forth-div"><h4>Forth Div</h4></div>
<div class="clear-both"></div>
</div>
You just need to make a few changes in your code. Firstly, you need to change the order of your DIV's (what DIV comes first, which one comes after that etc).
Secondly, you need to remove few of the float and clear properties from your CSS. I have attached a runnable code snippet below, with a few changes in your code: (just be sure to view the results in "full page" view, or else it would show the results of smaller screens).
.wrapper {
border: 2px solid;
padding: 10px;
min-height: 300px;
}
.first-div {
border: 2px solid red;
height: 80px;
margin-bottom: 10px;
}
.second-div {
border: 2px solid blue;
height: 200px;
margin-bottom: 10px;
}
.third-div {
border: 2px solid green;
height: 180px;
margin-bottom: 10px;
}
.forth-div {
border: 2px solid brown;
height: 100px;
}
#media (min-width: 892px) {
.first-div {
float: right;
width: 500px;
clear: right;
}
.second-div {
width: 280px;
clear: left;
}
.third-div {
clear: right;
float: right;
width: 500px;
}
.forth-div {
float: left;
width: 280px;
clear: left;
}
}
h4 {
text-align: center;
}
.clear-both {
clear: both;
}
<!DOCTYPE html>
<html>
<body>
<div class="wrapper">
<div class="first-div">
<h4>First Div</h4>
</div>
<div class="third-div">
<h4>Third Div</h4>
</div>
<div class="second-div">
<h4>Second Div</h4>
</div>
<div class="forth-div">
<h4>Forth Div</h4>
</div>
<div class="clear-both"></div>
</div>
</body>
</html>
I advise the solution to flex. I arranged the blocks as you need on the desktop version. Also, I removed <div class="clear-both"></div>. Because it is enough to make the free space by specifying the width: 90%. At a screen width of 892px, a media query is triggered.
Blocks become responsive!
Hope you like it.
.wrapper {
border: 2px solid;
padding: 10px;
min-height: 300px;
}
.container {
display: flex;
flex-flow: wrap;
flex-direction: column;
gap: 10px;
width: 90%;
height: 300px;
}
.container div {
box-sizing: border-box;
width: calc((100% / 2) - (10px / 2));
flex: 1 0 auto;
}
.first-div {
border: 2px solid red;
height: 80px;
order: 3;
}
.second-div {
border: 2px solid blue;
height: 200px;
order: 1;
}
.third-div {
border: 2px solid green;
height: 180px;
order: 4;
}
.forth-div {
border: 2px solid brown;
height: 80px;
order: 2;
}
h4 {
text-align: center;
}
#media (max-width: 892px) {
.container {
width: 100%;
height: auto;
}
.container div {
width: 100%;
order: unset;
}
}
<div class="wrapper">
<div class="container">
<div class="first-div"><h4>First Div</h4></div>
<div class="second-div"><h4>Second Div</h4></div>
<div class="third-div"><h4>Third Div</h4></div>
<div class="forth-div"><h4>Forth Div</h4></div>
</div>
</div>
Here is the fixed version, I hope this is what you wanted. I altered your html a bit, as you can see, css as well, but it's pretty clear what is going on in my code, if you have any questions, ask away !
Just a tip :
Dont use float property, it's very bad and deprecated, use flex or css grid for responsive design ! :)
.wrapper {
border: 2px solid;
padding: 10px;
min-height: 300px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.secondForth{
width : 40%;
}
.firstThird{
width : 40%;
}
.allFour{
display: none;
}
.first-div {
border: 2px solid red;
height: 80px;
margin-bottom: 10px;
}
.second-div {
border: 2px solid blue;
height: 200px;
margin-bottom: 10px;
}
.third-div {
border: 2px solid green;
height: 180px;
margin-bottom: 10px;
}
.forth-div {
border: 2px solid brown;
height: 100px;
}
#media (max-width: 892px) {
.secondForth, .firstThird{
display: none;
}
.allFour{
display: block;
width: 100%;
}
}
h4 {
text-align: center;
}
<div class="wrapper">
<div class="secondForth">
<div class="second-div"><h4>Second Div</h4></div>
<div class="forth-div"><h4>Forth Div</h4></div>
</div>
<div class="allFour">
<div class="first-div"><h4>First Div</h4></div>
<div class="second-div"><h4>Second Div</h4></div>
<div class="third-div"><h4>Third Div</h4></div>
<div class="forth-div"><h4>Forth Div</h4></div>
</div>
<div class="firstThird">
<div class="first-div"><h4>First Div</h4></div>
<div class="third-div"><h4>Third Div</h4></div>
</div>
</div>
I'm having a bit of difficulty creating a rectangle that looks like this. I'm a novice, any help would be great!
This is what I'm trying to recreate:
I know how to make the rectangle, and I'm assuming you would split the rectangle into two sections, where one would use "table" to create the rows for Name, Diagnosis etc.
#box {
margin-top: 1%;
height: 20px;
width: 562px;
border: 1px solid black;
padding: 100px;
}
.container {
display: table;
width: 100%;
}
.left-half {
position: relative;
left: 0px;
}
.right-half {
position: relative;
right: 0px;
}
Solution
Flex grid <3 they are amazing
I have provided you three examples. Rows, columns and an additional example to show more properties of the flex box.
justify-content and align-items are amazing tools to align things quickly.
Example:
/*ExamplE box*/
.example {
float: left;
width: 200px;
height: 100px;
border: 1px solid black;
display: flex;
flex-direction: row; /*Direction of flex*/
justify-content:center; /*horizontally aligns them to center*/
align-items: center; /*Vertically aligns them to center*/
}
.example__children {
width: 5px;
height: 5px;
margin: 0 5px;
border: 1px solid black;
}
/*Column box*/
.column {
float: left;
width: 200px;
height: 100px;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.column__children {
width: 100%;
height: 25%;
border: 1px solid black;
}
/*Row box*/
.row {
float: left;
width: 200px;
height: 100px;
border: 1px solid black;
display: flex;
flex-direction: row;
}
.row__children {
width: 25%;
height: 100%;
border: 1px solid black;
}
<div class="example">
<div class="example__children"></div>
<div class="example__children"></div>
<div class="example__children"></div>
<div class="example__children"></div>
</div>
<div class="column">
<div class="column__children"></div>
<div class="column__children"></div>
<div class="column__children"></div>
<div class="column__children"></div>
</div>
<div class="row">
<div class="row__children"></div>
<div class="row__children"></div>
<div class="row__children"></div>
<div class="row__children"></div>
</div>
I have a small div with fixed width and height, inside i have text, that could be probably wrapped and icon
All i need is to keep icon as close as possible to text, but if text is wrapped it will have extra space inside it
Example at JsFiddle
HTML
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
Css
wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
height: 50px;
width: 100px;
}
.title {
border: 1px solid green;
}
.icon {
border: 1px solid red;
width: 8px;
height: 8px;
}
You can use CSS Grid system:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 0em;
height: 50px;
width: 100px;
}
SOLUTION 1:
Well. To answer your question, you can straight ahead apply width to the .title.
.wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
height: 50px;
width: 100px;
}
.title {
border: 1px solid green;
width: 58px;
}
.icon {
border: 1px solid red;
width: 8px;
height: 8px;
}
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
SOLUTION 2:
But I would suggest that you use float instead of flex model with the below solution
.wrapper {
height: 50px;
font-size: 0px;
}
.title {
border: 1px solid green;
height: 50px;
line-height: 50px;
}
.icon {
border: 1px solid red;
width: 8px;
height: 8px;
}
.title, .icon {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
<style type="text/css">
.wrapper
{
}
.title {
border: 1px solid green;
display: inline-block;
max-width: 60px;
vertical-align: middle;
}
.icon
{
border: 1px solid red;
width: 8px;
height: 8px;
display: inline-block;
}
</style>
I am working on a webpage and the idea is that there are boxes at the bottom
of the page with some text on it. So making a box is not that hard,
but my question is: How can you make the boxes like this that I drew:
How can you make/arrange the boxes like on the link I provided. My attempts at making it the same has thus far failed, the boxes aren't appearing or it looks very messy.
So far I have this:
.div1 {
width: 500px;
height: 100px;
border-radius: 25px;
padding: 15px;
box-sizing: border-box;
background: #73B7DB;
margin-left: 5%;
color: #fff;
}
.div2 {
width: 200px;
height: 100px;
border-radius: 25px;
padding: 15px;
box-sizing: border-box;
background: #73B7DB;
color: #fff;
margin-left: 5%;
}
.container2 {
float: left;
margin: 0 auto;
width: 100%;
display: flex;
}
<div class="container2">
<div class="div1">Title!</div>
<br>
<div class="div2">Title!</div>
</div>
You can put them in a flex wrapper and define the containers themselves also as flex containers with flex-direction: column as shown below.
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
width: 100%;
}
.container1,
.container2 {
display: flex;
flex-direction: column;
}
.container1 {
width: 70%;
}
.container2 {
width: 30%;
}
.div1 {
width: 90%;
height: 100px;
border-radius: 25px;
padding: 15px;
background: #73B7DB;
margin-left: 5%;
color: #fff;
margin-bottom: 10px;
}
.div2 {
width: 90%;
height: 160px;
border-radius: 25px;
padding: 15px;
background: green;
color: #fff;
margin-left: 5%;
margin-bottom: 10px;
}
<div class="wrapper">
<div class="container1">
<div class="div1">Title!</div>
<div class="div1">Title!</div>
<div class="div1">Title!</div>
<div class="div1">Title!</div>
<div class="div1">Title!</div>
</div>
<div class="container2">
<div class="div2">Title!</div>
<div class="div2">Title!</div>
<div class="div2">Title!</div>
<div class="div2">Title!</div>
<div class="div2">Title!</div>
</div>
</div>
isn't flex-direction: column; he need to use flex-wrap:wrap; in container 2, beacause when you use display:flex; , flexbox dont respect the width of the elements, then you need to apply the property flex-wrap:wrap;. i'll recommend you use porcentege instead pixels
.div1,.div2 {
width: 100%;
height: 100px;
border-radius: 25px;
padding: 15px;
box-sizing: border-box;
background: #73B7DB;
margin-left: 5%;
color: #fff;
}
.container2 {
float: left;
margin: 0 auto;
width: 68%;
display: flex;
flex-wrap:wrap;
}
<div class="container2">
<div class="div1">Title!</div>
<br>
<div class="div2">Title!</div>
</div>
Please, I am learning CSS by my self and have 2 questions:
I have 3 DIV inside a "top" DIV, and I need the second (in the center) to fill all the remaining space.
Where is what I got: https://fiddle.jshell.net/3j838det/
Here is the HTML code:
<div class="main">
<div class="top">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
<div class="bottom">bottom</div>
</div>
Here is the CSS code:
.main {
width: 500px;
margin: 10px auto 0 auto;
border: 1px solid #000000;
}
.main .top {
border-bottom: 1px solid #000000;
background-color: #CDCDCD;
}
.main .top .first {
width: 140px;
padding: 4px;
display: inline-block;
background-color: #FFCC66;
}
.main .top .second {
width:auto;
padding: 4px;
display: inline-block;
background-color: #FF9966;
}
.main .top .third {
width: 100px;
padding: 4px;
display: inline-block;
background-color: #FF6666;
}
.main .bottom{
height:60px;
padding: 4px;
}
My questions are:
How can I make second DIV to fill all the remaining space?
Why there is a space between first and second DIV, and between second and third DIV, if I did not define any margin?
Thank you!!
How can I make second DIV to fill all the remaining space?
A job for Flexbox! :D
Add the following CSS:
.main .top {
display: -webkit-flex;
display: flex;
}
.main .top .second {
-webkit-flex: 1;
flex: 1;
}
Why there is a space between first and second DIV, and between second and third DIV, if I did not define any margin?
Because there are spaces between the divs in the markup (line break + indentation), and because you display the divs as inline-blocks.
See also How to remove the space between inline-block elements?.
Flexbox eliminates this problem though, so you can remove display: inline-block at once.
[ Updated fiddle ]
Use the table-cell layout.
.main {
width: 500px;
margin: 10px auto 0 auto;
border: 1px solid #000000;
}
.main .top {
width: 100%;
border-bottom: 1px solid #000000;
background-color: #CDCDCD;
display: table;
table-layout: fixed;
}
.main .top .first {
display: table-cell;
width: 140px;
padding: 4px;
background-color: #FFCC66;
}
.main .top .second {
display: table-cell;
padding: 4px;
background-color: #FF9966;
}
.main .top .third {
display: table-cell;
width: 100px;
padding: 4px;
background-color: #FF6666;
}
.main .bottom {
height:60px;
padding: 4px;
}
How can I make second DIV to fill all the remaining space?
You can calculate the width of the .second class by calculating the remaining width available with calc. Like so:
width: calc(100% - 264px);
The 264 above was calculated from the total width from first and third divs (140px + 100px = 240px) plus the total padding for all elements (24px), which is = 264px.
Why there is a space between first and second DIV, and between second and third DIV, if I did not define any margin?
You're having gaps because of how inline-block works. It's like the spaces between between words. There are a few ways to solve this, but float: left should do here. Like so:
float: left;
Also add width: 100% to your top element and set it to display: inline-block.
Try this Demo
.main {
width: 500px;
margin: 10px auto 0 auto;
border: 1px solid #000000;
}
.main .top {
border-bottom: 1px solid #000000;
background-color: #CDCDCD;
display: inline-block;
width: 100%;
}
.main .top > div {
padding: 4px;
float: left;
}
.main .top .first {
width: 140px;
background-color: #FFCC66;
}
.main .top .second {
width: calc(100% - 264px);
background-color: #FF9966;
}
.main .top .third {
width: 100px;
background-color: #FF6666;
}
.main .bottom{
clear: both;
height:60px;
padding: 4px;
}
<div class="main">
<div class="top">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
<div class="bottom">bottom</div>
</div>
There are two standard ways to achieve this.
display: table;
* {
box-sizing: border-box;
}
.main {
width: 500px;
margin: 10px auto 0 auto;
border: 1px solid #000000;
}
.top {
display: table;
width: 100%;
border-bottom: 1px solid #000000;
background-color: #CDCDCD;
}
.cell {
display: table-cell;
width: 60px;
padding: 4px;
}
.first {
background-color: #FFCC66;
}
.second {
width: 100%;
background-color: #FF9966;
}
.third {
background-color: #FF6666;
}
.bottom {
height: 60px;
padding: 4px;
}
<div class="main">
<div class="top">
<div class="cell first">1</div>
<div class="cell second">2</div>
<div class="cell third">3</div>
</div>
<div class="bottom">bottom</div>
</div>
overflow: hidden;
* {
box-sizing: border-box;
}
.main {
width: 500px;
margin: 10px auto 0 auto;
border: 1px solid #000000;
}
.top {
border-bottom: 1px solid #000000;
background-color: #CDCDCD;
}
.top:after {
content: '';
clear: both;
display: block;
}
.top .first {
float: left;
width: 140px;
padding: 4px;
background-color: #FFCC66;
}
.top .second {
overflow: hidden;
padding: 4px;
background-color: #FF9966;
}
.top .third {
float: right;
width: 100px;
padding: 4px;
background-color: #FF6666;
}
.main .bottom {
height: 60px;
padding: 4px;
}
<div class="main">
<div class="top">
<div class="first">1</div>
<div class="third">3</div>
<div class="second">2</div>
</div>
<div class="bottom">bottom</div>
</div>
Inline-block elements alway take some space (depend on it's font size) to it's right side. So better way to use flex. But you can use this css below to solve them right now.
.main .top>div{
margin-right: -4px;
}