How do I align multiple Inline-block div's above each other if a larger div is to the left like so:
EXAMPLE
I'm trying to make the two boxes go below the other two, but they place them self below the larger div.
HTML:
<div class="container">
<div class="big"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS:
.container{
border: 1px black solid;
width: 320px;
height: 150px;
text-align:center;
}
.box{
display: inline-block;
width: 20%;
height: 30%;
border: 1px black solid;
background: blue;
vertical-align:top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 60%;
background: beige;
}
Any idea how I would accomplish this?
EDIT: I'm aware this can be done by floating everything to the left. However, I would still like to keep the centre alignment from the main container.
Add float:left to both the classes. Include the child wrapping div.
.child_wrapper{
display: inline-block;
width: 100%;
height: 150px;
margin:0 8%
}
.box{
display: inline-block;
width: 20%;
height: 30%;
border: 1px black solid;
background: blue;
vertical-align:top;
float:left
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 60%;
background: beige;
float:left
}
DEMO Updated
Add float:left in .big class of your css. And if you remove the margin then add float:left in .box class also.
WORKING LINK
HTML:
<div class="container">
<div class="big"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS:
.container{
border: 1px black solid;
width: 320px;
height: 150px;
text-align:center;
}
.box{
display: inline-block;
width: 20%;
height: 30%;
border: 1px black solid;
background: blue;
vertical-align:top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 60%;
background: beige;
float:left
}
There is no need to use display:inline-block; Just only float:left do the trick.
.box{
float:left;
width: 20%;
height: 30%;
border: 1px black solid;
background: blue;
}
.big {
float:left;
border: 1px black solid;
width: 40%;
height: 60%;
background: beige;
}
Working Fiddle
Related
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 2 years ago.
I drew this in microsoft paint and wanted to make this in html/css
The numbers labeled are the box numbers
This is what I've done to try to achieve this
html file
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="box.css">
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3">
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<div id="box7"></div>
<div id="box8"></div>
</div>
</body>
</html>
css file
html, body {
margin: 0px;
height: 100%;
width: 100%;
}
#box1 {
border: solid black 3px;
height: 10%;
}
#box2 {
border: solid black 3px;
height: 3%;
}
#box3 {
border: solid black 3px;
height: 84%;
}
#box4 {
border: solid black 1px;
width: 50%;
height: 95%;
float: left;
margin: 5px;
}
#box5 {
border: solid black 1px;
width: 23%;
height: 25%;
float:left;
margin-left: 10px;
margin-top: 6px;
}
#box6 {
border: solid black 1px;
width: 23%;
height: 30%;
float:left;
margin-top: 10px;
margin-left: 10px;
}
#box7 {
border: solid black 1px;
width: 23%;
height: 30%;
float:left;
margin-top: 10px;
margin-left: 10px;
}
How it looks
I couldn't get box8 to show up on the right side I tried float right it messes it up. Also the boxes inside box3 are all inconsistent. If I full screen the boxes go right side. I used percentages for responsiveness but it didn't work. Anyone know how to do this ?
This can be achieved with flexbox - but note that you will need to use wrapper divs and apply different flex-directions to each in order to make the grid layout work.
body, html {
height: 100%;
width: 100%;
overflow: hidden;
}
.box-wrapper {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
}
#box1 {
padding:10px;
height:30px;
line-height:30px;
border: solid 1px red
}
#box2 {
height: 15px;
padding: 8px;
border: solid 1px blue
}
#box3 {
padding: 10px;
flex-grow:1;
display: flex;
flex-direction: row;
border: solid 1px green
}
#box4 {
flex-grow:2;
border: solid 1px orange
}
.middle-column {
flex-grow:1;
display: flex;
flex-direction: column;
}
.middle-column div{
flex-grow:1;
margin: 0 8px;
border: solid 1px #6e6e6e;
}
.middle-column div + div {
margin-top: 8px
}
#box8 {
flex-grow:1;
border: solid 1px black
}
<div class="box-wrapper">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">
<div id="box4">4</div>
<div class="middle-column">
<div id="box5">5</div>
<div id="box6">6</div>
<div id="box7">7</div>
</div>
<div id="box8">8</div>
</div>
</div
.products
{
width: 100%;
height: 500px;
background: gray;
}
.box
{
width: 250px;
height: 300px;
background: darksalmon;
border: 1px solid #000;
}
<div class="products">
<div class="box">
<p>Ola</p>
</div>
</div>
I want the paragraph to appear inside a square. The code as it is shows that the 2 divs are together. And only the content inside the paragraph appears.
This image ilustrates the format I intend:
.products
{position:relative;
width: 100%;
height: 500px;
background: gray;
}
.box
{p
width: 250px;
height: 300px;
background: darksalmon;
border: 1px solid #000;
}
<div class="products">
<p>Ola</p>
</div>
<div class="box">
</div>
try this...
background-color: ;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
Have you tried
<p class="box">...</p>
removing the div wrapping your paragraph?
So I have a red bar inside a container which lies between two black boxes. The boxes are fixed in size while the red bar and the container are based on percentages.
My goal is to reduce the size of the container, as well as the red bar without the right black box breaking onto the next line. I was able to resolve the issue via custom mathematical calculations in JavaScript, but I want to keep functionality and design separate. I feel that there must be some way to solve this with CSS without hacks or extra div tags.
How can this be achieved?
.container {
width: 80%;
height: 40px;
background: grey;
}
.box {
height: 50%;
border: 15px solid black;
border-top: none;
border-bottom: none;
float: left;
}
.bar {
width: 80%;
height: 100%;
background: red;
float: left
}
<div class="container">
<div class="box"></div>
<div class="bar"></div>
<div class="box"></div>
</div>
JSFiddle
CSS3 has a new flex display style supported by the major browsers.
.container {
display: webkit-flex;
display: flex;
height: 40px;
background: grey;
}
.box {
height: 50%;
border: 15px solid black;
border-top: none;
border-bottom: none;
}
.bar {
width: 100%;
height: 100%;
background: red;
}
<div class="container">
<div class="box"></div>
<div class="bar"></div>
<div class="box"></div>
</div>
To set the box elements to a specific width use min-width rather than width
Use calc() in your CSS. It's from CSS3, but supported in all major browsers, even IE9.
.bar {
width: calc(100% - 60px);
}
.container {
width: 80%;
height: 40px;
background: grey;
}
.box {
height: 50%;
border: 15px solid black;
border-top: none;
border-bottom: none;
float: left;
}
.bar {
width: calc(100% - 60px);
height: 100%;
background: red;
float: left
}
<div class="container">
<div class="box"></div>
<div class="bar"></div>
<div class="box"></div>
</div>
Try "table" layout
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.container {
width: 80%;
height: 40px;
background: grey;
display: table;
}
.container > div {
display: table-row;
}
.container > div > div {
display: table-cell;
vertical-align: top;
}
.box {
height: 50%;
margin: 0 7px;
border: 15px solid black;
border-top: none;
border-bottom: solid 1px black;
/*float: left;*/
}
.bar {
width: 80%;
height: 100%;
background: red;
/*float: left*/
}
</style>
</head>
<body>
<div class="container">
<div>
<div>
<div class="box"></div>
</div>
<div class="bar"></div>
<div>
<div class="box"></div>
</div>
</div>
</div>
</body>
</html>
I was looking if any one know how to interchange table cells positions using pure CSS. I have three divs similar to below
#content {
width: 1000px;
display: table;
float: none;
vertical-align: top;
border: 1px solid red;
}
#left {
float: left;
}
#right {
float: right;
}
#left, #right {
width: 200px;
display: table-cell;
right: 600px;
border: 1px solid grey;
}
#middle {
width: 600px;
display: table-cell;
float: left;
border: 1px solid grey;
margin-left: 200px
}
<div id="content">
<div id="left">some text and divs inside</div>
<div id="right">some text and divs inside</div>
<div id="middle">SOme more text and divs inside</div>
</div>
While loading the page, middle part flickers. So I am looking for a big help to interchange the positions of left and right using pure CSS.
Below code worked for me. Code concept took from Facebook after talking to David in comments. Thanks to him..
<div id="content">
<div id="left">some text and divs inside</div>
<div id="rightPart">
<div id="right">some text and divs inside</div>
<div id="middle">SOme more text and divs inside</div>
</div>
</div>
<style>
#content{
width: 1005px;
display: table;
float: none;
vertical-align: top;
border: 1px solid red;
}
#left{
float:none;
}
#right{
float:right;
}
#rightPart{
float: none;
vertical-align: top;
}
#left, #right{
width: 200px;
display: table-cell;
border: 1px solid grey;
vertical-align: top;
}
#middle{
width: 600px;
display: table-cell;
float: none;
border: 1px solid grey;
}
</style>
Consider the following code:
HTML:
<div id="wrapper">
<div class='a'></div>
<div class='a'></div>
<div class='a'></div>
<div class='a'></div>
<div class='a'></div>
</div>
CSS:
#wrapper {
width: 300px;
border: 1px solid black;
overflow: auto;
}
.a {
width: 70px;
height: 70px;
border: 1px solid red;
float: left;
}
How could I force the horizontal scroll bar to appear rather than displaying the red div's in the second line ?
Try this:
#wrapper {
width: 300px;
border: 1px solid black;
overflow: auto;
white-space: nowrap;
}
.a {
width: 70px;
height: 70px;
border: 1px solid red;
display: inline-block;
}
It will give you spacing between the inner divs - put them all in one line to remove those.