I have two boxes each one is an inline-block i want to put two inline-block boxes underneath each other , like the following image
here's the code i used
.box1
{
background-color: red;
display: inline-block;
width: 300px;
float: right;
height: 31%;
}
.box2
{
background-color: green;
display: inline-block;
width: 324px;
float: right;
height: 31%;
}
<body>
<div class="box1">Box1</div>
<div class="box2">Box2</div>
</body>
In the second box clear your float. Just add clear: both.
Code Snippet:
.box1 {
background-color: red;
display: inline-block;
width: 300px;
float: right;
height: 31%;
}
.box2 {
clear: both;
background-color: green;
display: inline-block;
width: 324px;
float: right;
height: 31%;
}
<body>
<div class="box1">Box1</div>
<div class="box2">Box2</div>
</body>
You could wrap both your divs in a container and float that instead.
example
.container {
float: right;
}
.box1 {
background-color: red;
width: 300px;
height: 31%;
}
.box2 {
background-color: green;
width: 324px;
height: 31%;
}
<body>
<div class="container">
<div class="box1">Box1</div>
<div class="box2">Box2</div>
</div>
</body>
Seems like you could just add a "clear: both;" to your second div and otherwise leave your code as-is.
.box1
{
background-color: red;
display: inline-block;
width: 300px;
float: right;
height: 31%;
}
.box2
{
background-color: green;
display: inline-block;
width: 324px;
float: right;
height: 31%;
clear: both;
}
<body>
<div class="box1">Box1</div>
<div class="box2">Box2</div>
</body>
Related
How do I make the image responsive and keep it in between the containers left and right.
I have tried putting it all into another container and it doesn’t work.
I know it sounds basic but it really is not.
body {
background-color: black;
}
.left {
background-color: red;
width: 150px;
height: 800px;
float: left;
}
.right {
background-color: green;
width: 150px;
height: 800px;
float: right;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
<div class="left"></div>
<div class="right"></div>
<img src="paintingOg.gif" style="width:50%">
How about this way? Is it (close to) what you need? Please check responsiveness too.
body {
background-color: black;
}
.left {
background-color: red;
width: 150px;
height: 800px;
float: left;
}
.right {
background-color: green;
width: 150px;
height: 800px;
float: right;
}
.center {
height: 800px;
background-color: blue;
overflow: auto;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
<div class="left"></div>
<div class="right"></div>
<div class="center">
<img src="https://picsum.photos/500/500?gravity=west">
</div>
You don't need containers to center something.
It's better to use 1 container that contains everything.
If you want to center your image into a div just use this code:
<div align="center">
<image src="whatever.png"/>
</div>
body {
background-color: black;
}
.left {
background-color: red;
width: 150px;
height: 800px;
float: left;
}
.right {
background-color: green;
width: 150px;
height: 800px;
float: right;
}
img {
width: 100%;
height: auto;
}
<div class="left"></div>
<div class="right"></div>
<div align="center">
<img src="paintingOg.gif" />
</div>
I'm trying to force a div to fit the text inside. No matter what I have tried, there seems to be extra white space. Here is my code:
body {
background-color: #000;
}
.holding {
width: 500px;
background-color: red;
height: 500px;
padding: 40px 100px;
max-width: 400px;
width: fit-content;
}
.childone {
background-color: white;
display: inline;
padding: 20px;
float: left;
clear: both;
}
.clear {
clear: both;
}
.childtwo {
background-color: white;
display: inline-block;
float: left;
padding: 10px;
}
<body>
<div class="holding">
<div class="childone">This is the Title and I really the div to end here with.no.extra.white.space </div>
<div class="clear"></div>
<div class="childtwo">This is the next child div with a bund of stuff.</div>
</div>
</body>
Use word-break: break-all, like:
.childone {
word-break: break-all;
}
Have a look at the snippet below:
body {
background-color: #000;
}
.holding {
width: 500px;
background-color: red;
height: 500px;
padding: 40px 100px;
max-width: 400px;
width: fit-content;
}
.childone {
background-color: white;
display: inline;
padding: 20px;
float: left;
clear: both;
word-break: break-all;
}
.clear {
clear: both;
}
.childtwo {
background-color: white;
display: inline-block;
float: left;
padding: 10px;
}
<body>
<div class="holding">
<div class="childone">This is the Title and I really the div to end here with.no.extra.white.space </div>
<div class="clear"></div>
<div class="childtwo">This is the next child div with a bund of stuff.</div>
</div>
</body>
Hope this helps!
div { width: max-content; }
Support browsers: https://caniuse.com/#search=max-content
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
Or you can use this way (change display attribute):
div { display: table; }
How do I align div to the bottom of another div in HTML?
And why it doesn't work?
HTML:
<div id="big">
<div class="small">1</div>
<div class="small">2</div>
<div class="small">3</div>
</div>
CSS:
#big {
background-color: red;
margin: 10px;
}
.small {
width: 150px;
height: 150px;
background-color: blue;
float: left;
display: inline-block;
position: absolute;
bottom: 0px;
margin: 10px;
display: inline-block;
}
Your question is unclear but do you mean like this?..
#big {
display:table-cell;
position:relative;
vertical-align:bottom;
background-color: red; margin: 10px; width: 800px; height: 300px;
}
.small {
display: inline-block;
width: 150px; height: 150px; background-color: blue;
margin: 10px;
}
<div id="big">
<div class="small">1</div>
<div class="small">2</div>
<div class="small">3</div>
</div>
This will work:
http://jsfiddle.net/4f4ejwr0/5/
#big {
background-color: red;
margin: 10px;
position: relative;
height: 300px;
}
#bottom {
position: absolute;
bottom: 0px;
margin: 10px;
}
.small {
width: 150px;
height: 150px;
background-color: blue;
float: left;
margin-left: 10px;
}
<div id="big">
<div id="bottom">
<div class="small">1</div>
<div class="small">2</div>
<div class="small">3</div>
</div>
</div>
is this what youre looking for? http://jsfiddle.net/swm53ran/94/
should be changed to
position: relative;
Add the following to your CSS Class:
bottom:0 !important;
and remove the position portion.
Try this
#big {
background-color: red;
margin: 10px;
width: 150px; //new line
}
.small {
width: 150px;
height: 150px;
background-color: blue;
float: left;
position: relative; // new line
margin: 10px;
}
Live jsfiddle
Update: This is ok ? Jsfiddle
How can I make this html structure
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
be displayed like this while div#1 and #2 have css float:left
( id names are integers only for demonstration purposes )
First of all, you will need to change the id's of your <div>'s to start with an alphabet rather than just one single digit since you won't be able to style your <div>'s using CSS then. Moreover, to achieve the sort of a layout which you're trying to create, you will need to wrap your two floated <div>'s inside a <div> and set the display property of that <div> to inline-block.
Here's a demo:
#one,
#two {
float: left;
}
#one {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#two {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#three {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#one {
background: pink;
}
#two {
background: brown;
}
#three {
background: gray;
}
div#row-left {
display: inline-block;
width: 200px;
overflow: hidden;
vertical-align: top;
}
div#row-right {
display: inline-block;
width: 200px;
vertical-align: top;
}
<div id="row-left">
<div id="one">One</div>
<div id="two">Two</div>
</div>
<div id="row-right">
<div id="three">Three</div>
</div>
Edit: If you want to align the three boxes to the right side of the page then you will need to wrap your HTML inside another <div> and set the text-align property of that <div> to right, like this:
#wrapper {
text-align: right;
}
#one,
#two {
float: left;
}
#one {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#two {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#three {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#one {
background: pink;
}
#two {
background: brown;
}
#three {
background: gray;
}
div#row-left {
display: inline-block;
width: 200px;
overflow: hidden;
vertical-align: top;
}
div#row-right {
display: inline-block;
width: 200px;
vertical-align: top;
}
<div id="wrapper">
<div id="row-left">
<div id="one">One</div>
<div id="two">Two</div>
</div>
<div id="row-right">
<div id="three">Three</div>
</div>
</div>
If you want to keep the given HTML structure, here's two different methods. One is working around the floats, the other is simply using absolute or relative positioning to force the third div into place.
HTML
<div id="d1">One</div>
<div id="d2">Two</div>
<div id="d3">Three</div>
CSS using inline-block (jsfiddle):
div {
width: 200px;
height: 200px;
margin: 10px;
}
#d1 {
float: left;
background-color: rgba(255,0,0,0.3);
}
#d2 {
float: left;
clear: left;
background-color: rgba(0,255,0,0.3);
}
#d3 {
background-color: rgba(0,0,255,0.3);
display: inline-block;
}
CSS using relative positioning (jsfiddle):
div {
width: 200px;
height: 200px;
margin: 10px;
}
#d1 {
float: left;
background-color: rgba(255,0,0,0.3);
}
#d2 {
float: left;
clear: left;
background-color: rgba(0,255,0,0.3);
}
#d3 {
background-color: rgba(0,0,255,0.3);
clear: both;
position: relative;
left: 220px;
top: -430px;
}
Fixed here - http://jsfiddle.net/3147og96/1/
html:
<div class="parent">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
</div>
css:
.parent {
height: auto;
width: 120px;
padding: 5px;
padding-left: 110px;
border: 1px solid red;
}
.parent div {
height: 50px;
width: 50px;
border: 1px solid red;
display: inline-block;
}
#one, #two {
float: left;
}
So i'm having a problem that is hard to explain. Here is the JSFiddle showing the problem :
http://jsfiddle.net/c9cwB/
CSS:
#container {
width: 400px;
height: 400px;
}
.div1 {
width: 50%;
display: inline-block;
height: 50%;
background: green;
float: left;
}
.div2 {
width: 50%;
height: 50%;
display: inline-block;
background: blue;
float: left;
}
.div3 {
width: 50%;
background: red;
display: inline-block;
height: 100%;
float: left;
}
Html:
<div id="container">
<div class="div1"></div>
<div class="div3"></div>
<div class="div2"></div>
</div>
What I want to happen is for the blue box to sit right under the green box so it looks like a website dashboard.
How do I do this? You can change css/html to fix it.
You can float the .div3 right and add clear:left; to the .div2 to get the desired layout (You can remove the display property as it is of no use combined with floats).
I also simplified your CSS code by adding a class to both left divs and using it to style them.
DEMO
HTML :
<div id="container">
<div class="div1 left"></div>
<div class="div3"></div>
<div class="div2 left"></div>
</div>
CSS :
/* Styles go here */
#container {
width: 400px;
height: 400px;
}
.left {
float:left;
width: 50%;
height: 50%;
}
.div1 {
background: green;
}
.div2 {
background: blue;
clear:left;
}
.div3 {
width: 50%;
background: red;
height: 100%;
float: right;
}
You have to chage the float on your div3 class.
it should be float: right; instead of float: left;
.div3 {
width: 50%;
background: red;
display: inline-block;
height: 100%;
float: right;
}
How about wrapping the ones you want to the left in another layer:
http://jsfiddle.net/dactivo/c9cwB/6/
<div id="container">
<div id="wrapper">
<div class="div1"></div>
<div class="div2"></div>
</div>
<div class="div3"></div>
</div>
/* Styles go here */
#container {
width: 400px;
height: 400px;
}
#wrapper{width:50%; display: inline-block;height:100%;float:left}
.div1 {
width: 100%;
display: inline-block;
height: 50%;
background: green;
float: left;
}
.div2 {
width: 100%;
height: 50%;
display: inline-block;
background: blue;
float: left;
}
.div3 {
width: 50%;
background: red;
display: inline-block;
height: 100%;
float: left;
}
Try Demo
<div id="container">
<div class="div3 right"></div>
<div class="div1"></div>
<div class="div2"></div>
</div>
Asumming that .widget is a item/box of the dashboard you can use:
.widget {
float: left;
}
.widget:nth-child(even) {
float: right;
}
Demo: http://codepen.io/torresandres/pen/wnIxF