I want place two images in one row, and add 10px spacing between them.
Since layout is responsive, the row should break on mobile screen and images should go one above the other.
Sample layout
I use just two images without extra code, it works, but there definitely should be better, more reliable way, using div containers that also allowing to add aligning to images(I need vertical-align:middle). What is better CSS to achieve this, specifically for this layout?
Maybe this can help you.
Place the images inside a div with a width of 50%. To add the padding you can use box-sizing: border-box;
<div class="row">
<div class="left ">
<img src="http://www.codewithsonia.com/stuff/img/vader.jpg" />
</div>
<div class="right ">
<img src="http://www.codewithsonia.com/stuff/img/vader.jpg" />
</div>
</div>
Make the images responsive by setting max-width to 100%
img {
max-width: 100%;
}
.left{
width:50%;
float: left;
position: relative;
border-right:5px solid green;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.right{
width:50%;
padding-right: 0px;
float: right;
border-left:5px solid red;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row:after {
clear: both;
}
#media screen and (max-width: 300px) {
.right {
width:100%;
border-left:0;
clear:right;
}
.left{
width:100%;
border-right:0;
clear:right;
}
}
You can see a fiddle here
http://jsfiddle.net/f4bt5Lq0/1/
Related
This question already has answers here:
Why does a border increase the element's width?
(6 answers)
Closed 5 years ago.
Here is my CSS:
.leftdiv {
width:20%;
border:2px solid blue;
float:left;
}
.middlediv {
width:60%;
border:1px solid orange;
float:left;
}
.rightdiv {
width:20%;
border:1px solid black;
float:right;
}
Here is my html:
<body>
<div class="leftdiv">left</div>
<div class="middlediv">middle</div>
<div class="rightdiv">right</div>
</body>
What I expect to see is three divs across the screen taking up 100% of the screen width.
Instead see this:
The right div is on the next line.
This is because of the borders.
If you leave out the borders your div will align.
Using the border-box solves the problem:
.leftdiv{
box-sizing: border-box;
width:20%;
border:2px solid blue;
float:left;}
.middlediv{
box-sizing: border-box;
width:60%;
border:1px solid orange;
float:left;}
.rightdiv{
box-sizing: border-box;
width:20%;
border:1px solid black;
float:right;}
The idea of a box-sizing: border box is that it modfies the behaviour of the normal box model to treat the padding and border as a part of the width element. So now when you set the % width the border is already taken into account. This is why now the 20+20+60 amount to 100%.
Additional info can be found in this link
The issue is that padding and border are, by default, calculated in addition to the width, not included in the width value. You need to use the box-sizing: border-box override to have them included:
div {
box-sizing: border-box;
}
Or, preferable, add it to each individual div's style block (because you might not want to blanket apply it to all divs on the page).
.leftdiv,.middlediv,.rightdiv{
box-sizing: border-box;
}
Example: https://codepen.io/anon/pen/RLZWWO
The border takes up additional space that is not accounted for in the div width. Try adding box-sizing: border-box; to each of your div classes.
You should add this:
html, body {
margin: 0;
}
to reset the default margin of the all-wrapping body and html element to zero
and
* {
box.sizing: border-box;
}
to include padding and borders in your percentage values.
html,
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.leftdiv {
width: 20%;
border: 2px solid blue;
float: left;
}
.middlediv {
width: 60%;
border: 1px solid orange;
float: left;
}
.rightdiv {
width: 20%;
border: 1px solid black;
float: right;
}
<body>
<div class="leftdiv">left</div>
<div class="middlediv">middle</div>
<div class="rightdiv">right</div>
</body>
My problem is that I am trying to use padding in my CSS so that the two divs inside my div are responsive at 50% each. But together they obviously are bigger than 100%. I know this is probably the paddings fault, but I don't know how to fix it.
CSS:
.columns {
max-width:100%;
width:100%;
display:inline-block;
text-align:left;
}
.col1 {
width:50%;
float:left;
padding-left:100px;
}
.col2 {
width:50%;
float:right;
padding-right:100px;
}
HTML:
<div class="columns">
<div class="col1">
</div>
<div class="col2">
</div>
</div>
By default the box model will use padding and border to expand an element beyond a specified width. To keep the paddings/borders from pushing outward, and contain them inward, use box-sizing: border-box;
.columns {
max-width: 100%;
width: 100%;
display: inline-block;
text-align: left;
}
.col1 {
width: 50%;
float: left;
padding-left: 100px;
}
.col2 {
width: 50%;
float: right;
padding-right: 100px;
}
.col1,
.col2 {
box-sizing: border-box;
}
<div class="columns">
<div class="col1">
</div>
<div class="col2">
</div>
</div>
In situations like these, it's useful to put this rule at the beginning of your styles:
* {
box-sizing: border-box;
}
It sets everything to box-sizing: border-box;, which means that the borders and paddings are included in the width/height settings, i.e. a container with width: 200px, border: 1px and padding 10px will really be 200px wide, including borders and padding (and not 222px, as it would be without box-sizing: border-box).
Let's assume for a second I do not wish to use Bootstrap.
How do you achieve his perfect vertical alignment of the input with its button? When I do it the button vertically misaligns. I do not wish to use "hacking" on the top-margin to fix this as I'm afraid it won't look well on all browsers.
How is bootstrap achieving this magic?
my goal is something like this:
I think the answer would be using box-sizing: border-box, as bootstrap does. This works across all recent modern browsers:
<input type="text" placeholder="Your text here">
<button>Button</button>
input{
float: left;
height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
button{
float: left;
height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
http://jsfiddle.net/4dgzbc3y/
You will have to use a container and display both as table cells (working jsFiddle):
Markup:
<div class="container">
<input type="text" placeholder="Your text here">
<div class="button">
<a>Button</a>
</div>
</div>
CSS:
.container{
display:inline-table;
vertical-align:middle;
}
input{
display:table-cell;
padding:5px;
}
.button{
display:table-cell;
background:gray;
padding:5px;
}
Note:
Keep in mind general things like both having the same font size and padding. To make it look slick you can round the outer corners same as in bootstrap :)
Have an input and button with explicit heights. The input and the button will need a comment between them to "connect" otherwise they will have na ugly space
.target {
height: 2em;
}
.target * {
height: 100%;
display:inline-block;
border:none;
outline:none;
}
.target input {
width:79%;
background-color:black;
padding-left: 5px;
}
.target button {
width:10%;
background-color: orange;
box-sizing: margin-box;
padding: 0; margin: 0;
border-top: 2px orange;
}
<div class="target">
<input placeholder="Foo" type="text"><!--
--><button>Bar</button>
</div>
See image for my problem, any input would be greatly appreciated!
Image LINK: http://i.stack.imgur.com/cgSqC.png
Here's a fiddle with a template if it helps:
http://jsfiddle.net/JUnTn/
HTML:
<div id="map-header">
TOP HEADER
</div><!-- end map-header -->
<div id="map-column">
LEFT COLUMN
</div><!-- end map-column -->
<div id="map-container">
FILLS THE REST OF THE PAGE
</div><!-- end map-container -->
CSS
html{
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#map-header{
clear:both;
width:100%;
height:100px;
border-bottom:2px dotted gray;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#map-column{
width:100px;
float:left;
background-color:green;
border-right:2px dotted gray;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#map-container{
float:left;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
EDIT:
still looking for assistance on this, I got this so far based off some research I did around Stack:
http://jsfiddle.net/SpSjL/1152/
Still isn't exactly what I need, any help is appreciated!
I hope this is what you want,see the updated fiddle http://jsfiddle.net/JUnTn/2/
I wrapped the two div's inside another div.
#test{
width:100%;
}
#map-column{
width:10%;
float:left;
}
#map-container{
float:left;
width:90%;
}
<div id="map-column">
LEFT COLUMN
</div><!-- end map-column -->
<div id="map-container">
FILLS THE REST OF THE PAGE
</div><!-- end map-container -->
<br class="clear" />
CSS
br.clear{
clear: both;
}
#map-column{
float: left;
width:100px;
}
#map-container{
float: right;
}
Jquery
$(document).ready(function() {
var myWidth = $(window).width() - 100;
$('#map-container').css('width',myWidth);
});
You can use a cool top bottom left right trick to get this (got from pinterest). When I normally want a full screen, edge to edge, I use,
.full_container{ top: 0, right: 0, bottom: 0, left: 0 }
In your scenario, since you want the 100px top and left padding you can do,
.full_container{ top: 100px, left: 100px, right: 0, bottom: 0 }
Note, this is assuming you are using absolute positioning.
<div id="colorscheme">
</div>
<div id="content">
<div id="display_saved">
TEXT TEXT TEXT
</div>
This is HTML structure of related to issue document.
CSS:
#colorscheme{
width:25%;
display:inline-block;
height: 50px;
background:green;
}
#content{
width:50%;
display:inline-block;
background: gray;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#display_saved{
border: solid 1px red;
padding: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width:100%;
}
JSfiddle
As you can see from the feedle, there is some space between #colorscheme and #content, despite there is no margins, and there is border-box property. How can I reduce it?
Inline block can cause whitespace issues and I would recommend floating the elements.
Have a look at this forked example - http://jsfiddle.net/DkhDm/1/
It's also worth noting that display inline-block lacks support in some browsers - which is another reason to always use floats ahead of it! You do however have the small added complication of clearing the floats but this is easily achieved.
#colorscheme{
width:25%;
float: left;
height: 50px;
background:green;
}
#content{
width:50%;
float: left;
background: gray;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#display_saved{
border: solid 1px red;
padding: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width:100%;
}
It's just whitespace, which is logical because you've reduced your blocklevel elements to inline blocks explicitly. Eliminate the whitespace and it'll go away:
<div id="colorscheme"></div><div id="content"><div id="display_saved">TEXT TEXT TEXT </div></div>
DEMO
CSS:
#colorscheme{
width:25%;
display:block;
height: 50px;
background:green;
float:left;
}
i have added float:left; and changed to display:block;
You can move the elements back into place with negative 4px of margin. (Not in IE6,7). inline-block do cause whitespace, i don't think it's a bug and it's rather nice to have when using inline-block on text-elements.
#colorscheme{
margin-right: -4px;
width:25%;
display:inline-block;
height: 50px;
background:green;
}
You can also use html comments to eliminate the whitespace.
<div>
<p>Content</p>
</div><!--
--><div>
<p>More content</p>
</div>