How could I remove this extra space middle of "Top content" and "Left content" ?
I want Left and Right to the same level.
I don't want to lose equal margin for all these blocks.
STATIC IMAGE
HTML
<div class="top">Top content</div>
<div class="left">Left content</div>
<div class="right">Right content</div>
CSS
.top
{
margin: 3%;
background: red;
}
.left
{
margin: 3%;
float: left;
width: 50%;
background: yellow;
}
.right
{
margin: 3%;
overflow: hidden;
background: green;
}
LIVE DEMO
http://jsfiddle.net/yF6MX/20/
BEST SOLUTION SO FAR
http://jsfiddle.net/yF6MX/14/
If we could use same margin with Top content, then this solution would be perfect.
This seems to be what you want:
.top
{
border: 1px solid #ccc;
background: red;
margin-left:10px;
margin-right:10px;
}
.left
{
float: left;
width: 50%;
background: yellow;
margin: 10px;
}
.right
{
background: green;
margin: 10px;
overflow: hidden;
}
You were doing great, but with you "margin:10px" in .top, you were adding a margin on your left block, just do margin on left and right
You could try removing the margin-top from your left and right elements.
margin: 0 10px 10px 10px;
http://jsfiddle.net/yF6MX/5/
use this
UPDATE http://jsfiddle.net/yF6MX/15/
.top
{
border: 1px solid #ccc;
background: red;
margin: 10px;
margin-bottom: 0px;
}
.left
{
float: left;
width: 47%;
background: yellow;
margin: 2%;
}
.right
{
background: green;
margin: 2% 2% 2% 0;
overflow: hidden;
float: right;
width: 47%;
}
I would personally add a container with padding all around it:
<div class="container">
<div class="top">Top content</div>
<div class="left">Left content</div>
<div class="right">Right content</div>
</div>
Then remove the other margin properties and stick a margin-bottom on .top and margin-right on .left, and also add the new .container CSS:
.container {
padding: 10px;
}
.top {
border: 1px solid #ccc;
background: red;
margin-bottom: 10px;
}
.left {
float: left;
width: 50%;
background: #FF0;
margin-right: 10px;
}
.right {
background: green;
overflow: hidden;
}
DEMO
Hope this helps.
Related
I have divs that i want to wrap to the next line when the browser window gets smaller. I also want margin to be put in between the divs so that there's a gap between them. The problem I'm having is that the margin on the centre divs causes the divs to wrap incorrectly if the browser is set to a specific size. At a certain size you have 2 divs underneath one div. See my screenshot below as an example and this fiddle: http://jsfiddle.net/uhh2jwe2/ (change the width of the window)
This really needs to be dynamic as it will be a framework solution for laying out differently sized divs. The parent div will be fluid similar to the example. Any help would be great
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
You can use media queries to alter the css on smaller screen.
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
#media (max-width: 435px) {
#outer > div {
margin-right:auto;
margin-left:auto;
margin-bottom:15px;
float:none;
}
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
Use Media query like this:
#outer div:last-child {
margin-bottom: 0;
}
#media screen and (max-width:570px) {
.inner1, .inner2, .inner3 {
margin-bottom: 5px;
}
}
#media screen and (max-width:411px) {
.inner1, .inner2, .inner3 {
float: none;
margin: auto;
margin-bottom: 5px;
}
}
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
#outer div:last-child {
margin-bottom: 0;
}
#media screen and (max-width:570px) {
.inner1, .inner2, .inner3 {
margin-bottom: 5px;
}
}
#media screen and (max-width:411px) {
.inner1, .inner2, .inner3 {
float: none;
margin: auto;
margin-bottom: 5px;
}
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
I would recommend a solution that extracts the grid-elements from the content-elements. Therefore you have a lot more control about your layout and you can be more flexible with content you want to place into it.
Use your .inner elements as grid-elements and wrap content inside them into .inner-content
Wrap all inners into a row to get rid of the outer-gutter
Give the .inner elements a percentage-width and a px-max-width. So the elments can take alwyay 33.33% of the avaiable width but never more then 150px.
I added some adjustments for small screens, so the .inner elements wrap below each other and take more then 33.33% of the .outer container width.
Inspect the code: http://jsfiddle.net/uhh2jwe2/5/
* {
box-sizing: border-box;
}
/* flexible outer container */
.outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: hidden;
background-color: red;
}
/* remove outer gutter */
.row {
margin: 0 -10px;
}
/* .inner will take care of the width */
.inner {
width: 33.33%;
max-width: 150px;
float: left;
padding: 0 10px;
}
/* .inner-content take care of the height */
.inner-content {
height: 150px;
color: #fff;
background: blue;
}
#media (max-width: 435px) {
/* this wraps .inner elements below each other and extends width */
.outer .inner {
padding: 10px 0;
width: 100%;
max-width: 100%;
float:none;
}
}
<div class="outer">
<div class="row">
<div class="inner">
<div class="inner-content">1</div>
</div>
<div class="inner">
<div class="inner-content">2</div>
</div>
<div class="inner">
<div class="inner-content">3</div>
</div>
</div>
</div>
I would suggest to use bootstrap's technique for that. Have padding on both sides of your inner elements, and negate it with negative margin on the container.
This will require more markup tough. While .row and .container could be merge on the same element, the background-color would overflow to the left because of the negative margin.
.container {
background-color: green;
width: 510px;
}
.row {
font-size: 0;
margin: 0 -15px;
}
.block {
font-size: 12px;
padding: 0 15px;
display: inline-block;
}
.content {
width: 150px;
height: 150px;
background-color: red;
}
<div class="container">
<div class="row">
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
</div>
</div>
in your example, the first two divs are 170px wide (150+20), and the third is 150px wide because it doesn't have a margin, thats the problem.
avoid #media if you mant it to be fully responsive and not jumping from 4 items a line to 1 item a linefor example.
you can solve your issue by simply adding a margin-right:20 to your last element, but it is better to to like so :
.inner1, .inner2, .inner3{
float: left;
width: 150px;
height: 150px;
margin: 2px 10px; //left & right sides to half of 20px
background-color: blue;
}
because it will split the margin to the two sides, making it more symetrical.
For laying out differently sized divs.
if all your divs can change size but stay equal, it will work, but if the first div is 70 and the 2nd and 3rd are 50, there will always be two divs on the bottom line at some point.
I think I've found the simplest solution to what I'm trying to do without having to use media queries. I simply added the right margin to all fields including the last field rather than adding it to every field except the final field.
I then wrap all the fields in another div and add a minus margin (the same size as the gaps) so that the fields will wrap when they hit the side of the container. Here's a fiddle with the solution: http://jsfiddle.net/rahg1ky3/
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
#inner {
margin-right: -20px;
}
.cont {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
<div id="outer">
<div id = "inner">
<div class="cont">1</div>
<div class="cont">2</div>
<div class="cont">3</div>
</div>
</div>
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 often do the width hack 49% and border 1px to do seperator for 2 column. It worked, just like the below demo. But is there any better way of doing it? I want to avoid this 49% hack, because when the viewport shrink to a larger or smaller size, it's obvious and the design will break.
body{
margin:0;
}
.left {
background: #eee;
float: left;
width: 49%;
border-right:1px solid #333;
}
.right {
background: #eee;
float: right;
width: 50%;
}
img {
margin: 0 auto;
display: block;
width: 44px;
padding: 5px 0;
}
<div class="navigate" style="width: 170px;">
<div class="left">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/previous_arrow_point_flat-128.png">
</div>
<div class="right">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/next_arrow_point_flat-128.png">
</div>
</div>
You can use box-sizing
CSS
body {
margin:0;
}
.left {
background: #eee;
float: left;
width: 50%;
border-right:1px solid #333;
box-sizing:border-box;
}
.right {
background: #eee;
float: right;
width: 50%;
}
img {
margin: 0 auto;
display: block;
width: 44px;
padding: 5px 0;
}
HTML
<div class="navigate" style="width: 170px;">
<div class="left">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/previous_arrow_point_flat-128.png">
</div>
<div class="right">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/next_arrow_point_flat-128.png">
</div>
</div>
DEMO HERE
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
#content
{
background-color: red;
text-align: center;
}
#content div
{
float: left;
background-color: green;
padding: 10px;
margin: 10px;
}
<div id="content">
<div>AAAAA</div>
<div>AAAAA</div>
<div>AAAAA</div>
<div>AAAAA</div>
<div>AAAAA</div>
<div>AAAAA</div>
<div>AAAAA</div>
<div>AAAAA</div>
</div>
<div style="clear: both;"></div>
http://jsfiddle.net/nTLny/
here the usual code. I want to achieve the following:
so the aligned div goes center.
Text-align center will work if you use display:inline-block instead of using float
JSfiddle
CSs
#content div
{
display: inline-block;
background-color: green;
padding: 10px;
margin: 10px;
}
#content div
{
float: none;
display:inline-block;
background-color: green;
padding: 10px;
margin: 10px;
}
Try it...
#content div {
background-color: #008000;
display: inline-block;
margin: 10px;
padding: 10px;
}
your css:
#content{
background-color:white ;
text-align: center;
width:300px; /*giving it a width so it actually adjust to your sample image 300px seems to be close to yours*/
}
#content div
{
display: inline-block; /*second adjustment you need as "Abhineet" has mentioned*/
background-color: green;
padding: 10px;
margin: 10px;
}
#bottom {
float:right;
}