I have the problem that I have 3 divs and when one div is longer than the other div, it creates some whitespace.
I would like to have the whitespace gone and the divs connect.
This is what I have now:
.one{
background: lightgreen;
height: 300px;
width:100px;
float: left;
margin: 5px;
}
.two{
background: brown;
height: 500px;
width: 100px;
float: left;
margin: 5px;
}
.main{
width: 220px;
}
.info{
background: orange;
height: 200px;
width:100px;
float: left;
margin: 5px;
}
<div class='main'>
<div class='info'>
to this one
</div>
<div class='two'>
</div>
<div class='two'>
this one should be up
</div>
<div class='two'>
</div>
<div class='one'>
</div>
</div>
The only reason I have these classes is because I want to show an example of my problem, In reality all divs have the same class.
Could anyone solve the problem for me?
As you can see in my image, the bottom div is not connected to the one above it. all divs have float: left;
That is not possible, when the class .two is floating left.
You have to use float:right for the class .two instead.
.one{
background: lightgreen;
height: 300px;
width:100px;
float: left;
margin: 5px;
}
.two{
background: brown;
height: 500px;
width: 100px;
float: right;
margin: 5px;
}
.main{
width: 220px;
}
<div class='main'>
<div class='one'>
to this one
</div>
<div class='two'>
</div>
<div class='one'>
this one should be up
</div>
</div>
You will need to float the .two class to the right.
float: right;
Hope this helps :>
.one{
background: lightgreen;
height: 300px;
width:100px;
float: left;
margin: 5px;
}
.two{
background: brown;
height: 500px;
width: 100px;
float: right;
margin: 5px;
}
.main{
width: 220px;
}
<div class='main'>
<div class='one clearfix'>
to this one
</div>
<div class='two'>
</div>
<div class='one'>
this one should be up
</div>
</div>
Add float:right to .two div element
Related
I don't think the title is a good one but I don't know how to say it in a better way.
I have 3 divs representing an image, user info, user experience.
Due to mobile responsiveness experience must come last, but with the code below the experience div doesn't touch the top.
.one{
width: 40%;
height: 50px;
padding: 5px;
background-color: #0f0;
}
.two{
width: 40%;
height: 70px;
padding: 5px;
background-color: #0ff;
float: left;
}
.three{
width: 56%;
height: 100px;
padding: 5px;
background-color: #f00;
float: right;
}
.four{
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
}
<div class="four">
<div class="one">1 image</div>
<div class="two">2 info</div>
<div class="three">3 experience</div>
</div>
How it should look like:
You can wrap the left hand side in a separate div and float that left.
.left {
float: left;
width: 40%;
}
.one {
height: 50px;
padding: 5px;
background-color: #0f0;
}
.two {
height: 70px;
padding: 5px;
background-color: #0ff;
}
.three {
width: 58%;
height: 100px;
padding: 5px;
background-color: #f00;
float: right;
}
.four {
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
}
<div class="four">
<div class="left">
<div class="one">1 image</div>
<div class="two">2 info</div>
</div>
<div class="three">3 experience</div>
</div>
An alternative approach using flexbox:
.left {
min-width: 40%;
}
.one {
height: 50px;
padding: 5px;
background-color: #0f0;
}
.two {
height: 70px;
padding: 5px;
background-color: #0ff;
}
.three {
flex: 1;
height: 100px;
padding: 5px;
background-color: #f00;
}
.four {
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
display: flex;
}
<div class="four">
<div class="left">
<div class="one">1 image</div>
<div class="two">2 info</div>
</div>
<div class="three">3 experience</div>
</div>
Your 1st div(image) has a margin to the right so 3rd div(experience) won't fit in. So at first you have to wrap the 1st two div's into a container like the example below
<div class="four">
<div class = "container">
<div class="one">1 image</div>
<div class="two">2 info</div>
</div>
<div class="three">3 experience</div>
</div>
After that you will need to inline the container and set the width of container to 40% and first two div's to 100% like the CSS below.
.one{
width: 100%;
height: 50px;
padding: 5px;
background-color: #0f0;
}
.container {
display:inline-block;
width:40%;
}
.two{
width: 100%;
height: 70px;
padding: 5px;
background-color: #0ff;
float: left;
}
.three{
width: 56%;
height: 100px;
padding: 5px;
vertical-align: text-top;
background-color: #f00;
float: right;
}
.four{
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
}
Here's it on Codepen and Jsfiddle
Wrap div's one and two in a div that sets the width and floats left, then float div three to the right.
Make div class one and two to 100% width so they fill the left div completely, and set the left div to the width you wanted.
HTML:
<div class="four">
<div class="left">
<div class="one">
1 image
</div>
<div class="two">
2 info
</div>
</div>
<div class="three">
3 experience
</div>
</div>
CSS:
.one{
height: 50px;
padding: 5px;
background-color: #0f0;
display: block;
}
.two{
height: 70px;
padding: 5px;
background-color: #0ff;
display: block;
}
.three{
width: 56%;
height: 100px;
padding: 5px;
background-color: #f00;
float: right;
display: inline-block;
}
.left {
float: left;
display: block;
width: 42%;
}
.four{
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
display: block;
float: left;
}
I'm trying to place 6 divs with different height on 3 columns.
I use float property for divs on the left and on the right and margin: 0 auto for central divs.
Using clear property I placed second row of divs under the first one, but I want each div is under the div with the same float option without blank space between them.
Instead they are aligned the lowest div.
Here's the fiddle: fiddle
div {
border: 1px solid red;
width: 30%;
}
.left {
float: left;
height: 200px;
}
.right {
float: right;
height: 100px;
}
.center {
margin: 0 auto;
height: 50px;
}
<div class="left">left-top</div>
<div class="right">right-top</div>
<div class="left" style="clear:left">left-bottom</div>
<div class="right" style="clear:right">right-bottom</div>
<div class="center">center-top</div>
<div class="center">center-bottom</div>
Thanks for help,
Piero.
You can try this one.
Html Code
<div class="left">left-top</div>
<div class="right">right-top</div>
<div class="left">left-bottom</div>
<div class="clearfix"></div>
<div class="right">right-bottom</div>
<div class="center">center-top</div>
<div class="center">center-bottom</div>
Css Code
.left, .right, .center {border: 1px solid red;width: 30%;margin:2px;}
.clearfix{clear:both;}
.left {float:left;}
.right { float:left;}
.center {float:left;}
check fiddle https://jsfiddle.net/Dhavalr/9cyq8tu9/
Put them in 3 columns/DIVs 33.33% wide which you float:
https://jsfiddle.net/8Lbc5pq7/4/
HTML:
<div class="column">
<div class="left">left-top</div>
<div class="left">left-bottom</div>
</div>
<div class="column">
<div class="center">center-top</div>
<div class="center">center-bottom</div>
</div>
<div class="column">
<div class="right">right-top</div>
<div class="right" style="clear:right">right-bottom</div>
</div>
CSS:
div {
border: 1px solid red;
width: 95%;
}
.column {
float: left;
border: none;
width: 33.33%;
}
.left {
float: left;
height: 200px;
}
.right {
float: right;
height: 100px;
}
.center {
margin: 0 auto;
height: 50px;
}
try using this style:
div {
border: 1px solid red;
width: 30%;
display:inline-block;
}
.left {
float: left;
height: 200px;
}
.center {
margin: 0 auto;
height: 50px;
}
Please try this code
<style>
div {
border: 1px solid gray;
width: 33.1%;
}
.left {
float: left;
height: 200px;
}
.right {
float: left;
height: 100px;
}
.center {
margin: 0 auto;
float:left;
height: 50px;
}
</style>
<div class="left">left-top</div>
<div class="center">center-top</div>
<div class="right">right-top</div>
<div style="clear:both;"></div>
<div class="left" style="clear:left;">left-bottom</div>
<div class="center">center-bottom</div>
<div class="right" style="clear:right;">right-bottom</div>
I have following html code
<div id="main">
<div id="content">
<h1>Title text</h1>
<div style="width: 100px; height: 100px; background: red"></div>
</div>
<div id="right">
<h2>Right title</h2>
</div>
</div>
And css
#main {
width: 230px
}
#content {
float: left;
width: 150px;
}
#right {
float: right;
width: 80px;
}
#right h2 {
margin-top: 1em;
}
I want Right title to be aligned with top of red square. The problem is that Title text can be long and text will be placed on two lines.
Can I achieve this using only css?
http://jsfiddle.net/6Rpkh/312/
I change CSS and structure of html, i put div #right,#right1 into the content and set margin-top negative
CSS
#content, #content1 {
float: left;
width: 185px;
}
#right, #right1 {
float: right;
width: 80px;
margin-top:-105px;
}
#right h2, #right1 h2 {
margin-top: 0em;
}
HTML
<div id="main">
<div id="content">
<h1>Title text</h1>
<div style="width: 100px; height: 100px; background: red"></div>
<div id="right">
<h2>Right title</h2>
</div>
</div>
</div>
<br style="clear: both"><br><br>
<div id="main1">
<div id="content1">
<h1>Very long title text on two lines</h1>
<div style="width: 100px; height: 100px; background: red"></div>
<div id="right1">
<h2>Right title</h2>
</div>
</div>
</div>
http://jsfiddle.net/6Rpkh/313/
maybe remake the structure to have 3 sections: header, left and content, instead of left and content only:
http://jsfiddle.net/78Lczwoq/
.square {
float: left;
background: red;
width: 100px;
height: 100px;
}
.header {
margin-bottom: 20px;
}
.media {
margin: 20px;
padding: 20px;
border: solid 1px #ccc;
overflow: hidden;
}
.left {
float: left;
}
.content {
overflow: hidden;
padding-left: 10px;
}
You actually need to modify your html. Check the below fiddle:
#main, #main1 {
width: 230px
}
#content, #content1 {
width: 150px;
}
#right, #right1 {
float: right;
width: 80px;
}
#right h2, #right1 h2, .box {
display: inline-block;
vertical-align: top;
}
Working Fiddle
Here is the code that works perfect as per you requirement.
HTML
<div id="main">
<div id="inner_container">
<p class="top_title">Some long title here it automatically adjusts</p>
<div class="sq_box">
</div>
<div class="right_title">
hello
</div>
</div>
</div>
CSS
#main{
width:400px;
height:200px;
}
#inner_container{
width:100%;
height:auto;
}
p.top_title{
width: 100px;
word-wrap: break-word;
}
.sq_box{
width:100px;
float:left;
height:100px;
background-color:red;
}
.right_title{
float:left;
margin-left:10%;
}
JSFILDLE demo
This adjusts itself no need to care about any margin.. its robust ..
how can I display the given html structure while all divs has float: left ?
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
This is how i did it.
div {
margin: 10px;
overflow: auto;
display: inline;
clear: none;
float: left;
}
#container {
max-width: 390px;
display: block;
}
#d1 {
background: red;
width: 200px;
height: 100px;
}
#d2 {
background: blue;
width: 150px;
height: 150px;
float: right;
}
#d3 {
background: green;
width: 200px;
height: 150px;
}
<div id="container">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</div>
Just needs the second element to be floated right within a container div.
I'm sorry this answer is vague, but it's only as vague as your question. An example of how this could be done is below:
#container {
float: left;
}
#d1 {
width: 200px;
height: 100px;
background: blue;
}
#d2 {
width: 200px;
height: 100px;
background: green;
}
#d3 {
width: 100px;
height: 200px;
background: red;
float: left;
}
<div id="container">
<div id="d1"></div>
<div id="d2"></div>
</div>
<div id="d3"></div>
I hope you get some inspiration . . .
You put a container div around div one and three
#container
{
width:80%;
float:left;
}
#three
{
width:20%;
float:left;
background-color:blue;
height:600px;
}
#one, #two
{
background-color:green;
margin:10px 10px;
height:300px;
}
<div id="container">
<div id="one">1</div>
<div id="two">2</div>
</div>
<div id="three">3</div>
I have a div with a height en width of 33.33%. I want text in the middle of the div.
HTML
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
</div>
CSS
#blog1 {
width: 33.33%;
padding-bottom: 33.33%;
background: red;
float: left;
}
How can i make this?
I suggest this:
html
<div class="blogs" id="content">
<div id="blog1">text in the middle
<span>blog 1</span>
</div>
<div id="blog2"><span>blog 2</span></div>
<div id="blog3"><span>blog 3</span></div>
</div>
css
#blog1{
width: 33.33%;
/*padding-bottom: 33.33%;*/
background: red;
text-align: center;
display:table-cell;
vertical-align:middle;
position: relative;
}
.blogs > div > span{
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
}
#blog2{
width: 33.33%;
padding-bottom: 33.33%;
background: green;
text-align: center;
display:table-cell;
position: relative;
}
#blog3{
width: 33.33%;
padding-bottom: 33.33%;
background: blue;
text-align: center;
display:table-cell;
position: relative;
}
#content{
display:table;
}
fiddle
And another example with static width e.g. 500px fiddle
Have a look at this fiddle.
Just set height and line-height equal and add vertical-align:middle;
Your code will look like this:
#blog1{
width: 33.33%;
height:300px;
background: red;
float: left;
text-align:center;
vertical-align:middle;
line-height:300px; /* has to bee the same value as the height of the div */
}
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
<!-- You need to add this after the last <div> -->
<div style="clear:right;"></div>
</div>
#blog1, #blog2, #blog3 {
float:left;
padding: 3% 0;
background: red;
width: 100px;
height:100%;
text-align:center;
}
JS Fiddle