Learning my way through this...
I'm working toward setting up rows of divs - I don't want any space between them and am not sure what properties to look for to adjust as the width changes.
I'm getting either a 1px gap appearing/disappearing as the images scale, or getting one of the divs bumped down to the next line.
The odd thing is that both rows are basically the same, so I'm lost here.
Here's the current page:
http://www.turnerdesign.com/brackets/
thanks Andrew
On
Please use this code
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
#image {
display: block
}
#container{
width: 960px;
margin: 0px auto;
}
#header{
width:100%;
height:auto;
margin-bottom: 0px;
float: left;
line-height: 0;
}
#name{
height:50px;
background:none;
width:300px;
float: left;
line-height: 0;
vertical-align: top;
}
#contact{
height:30px;
background:none;
width:auto;
float: right;
line-height: 0;
}
.image-container{
vertical-align: top;
width: auto;
height:auto;
background:#296db1;
background-size: cover;
line-height:0;
}
.div-left{
float: left;
}
@media screen and (max-width:959px){
.image-container{
float:left;
}
#container{
width: 100%
}
#column700{
width: 73%;
}
#column260{
width: 27%;
}
img {
width: 100%;
height:auto;
}
}
@media screen and (max-width:640px){
.image-container{
float:left;
}
#container{
width: 100%
}
#column700{
width: 73%;
}
#column260{
width: 27%;
}
img {
width: 100%;
height:auto;
}
}
@media screen and (max-width:320px){
.image-container{
float:left;
}
#container{
width: 100%
}
.image-container{
width: 320px;
}
img {
width: 100%;
height:auto;
}
}
.row2{
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="name">
<p style="font-family:Arial; color:#d1d1d1; font-size:1.5em">Title | Description</p>
</div>
<div id="contact">
<p style="font-family:Arial; color:#d1d1d1; font-size:1.5em">Menu</p>
</div>
<div id="header">
<a href="http://www.w3schools.com"><img src="http://www.turnerdesign.com/brackets/images/banner.jpg" block;="" style="display:"></a>
</div>
<div class="row-container">
<!--row 1-->
<div class="row row1">
<div class="image-container div-left" id="column700">
<a href="http://www.w3schools.com"> <img src="http://www.turnerdesign.com/brackets/images/blake.jpg"> </a>
</div>
<div class="image-container" id="column260">
<a href="http://www.w3schools.com"><img src="http://www.turnerdesign.com/brackets/images/canyonmap.jpg"></a>
</div>
</div>
<!--row 2-->
<div class="row row2">
<div class="image-container div-left" id="column260" style="">
<a href="http://www.w3schools.com"> <img src="http://www.turnerdesign.com/brackets/images/canyon.jpg"> </a>
</div>
<div class="image-container" id="column700">
<a href="http://www.w3schools.com"><img src="http://www.turnerdesign.com/brackets/images/warrior.jpg"></a>
</div>
</div>
</div>
</div>
</body>
</html>
You can also see the - jsfiddle.net demo link.
You can always think about optimizing the code further:
img parameters more smartly for all media queries.HTML so it becomes more manageable.
On
Your problem doesn't actually come from the widths applied to your divs, but because of the heights of images.
what is happening here is that in your second row, you have one 700x100 image followed by a 260x100 image. Their ratios aren't the same, so you can understand that commanding their widths will have different effects on their respective heights.
In the end, at some window width, you end up with 1px difference between your images' heights (most often the first one being higher). That causes the 3rd row to actually be pushed to the right, since it has a 1px height to fill first. However, there is only enough room for the smaller image, so the browser breaks a new line for the bigger one.
Solutions:
clear: left; on every image at the start of a new line. It will solve this problem, but the 1px height difference will still be there and a white line between your smaller image and the next line will appear.PS: i'll edit this post if i find better solutions.
On
To lose the gaps:
Remove the height: auto; and set a height.
@media screen and (max-width: 959px)
#column700 {
width: 73%;
height: 50px;
float: left;
}
/* Do the same for the other column */
}
For gaps:
(I wrote this first, then re-read the question and was like, OMG I did a whole answer for another question as I didn't understand it at first, but just incase someone needs gaps, here's how)
HTML:
<div class="column700">
<div id="firstProject">
</div>
</div>
CSS:
#firstProject {
width: 100%;
padding: 10px;
background: blue;
}
You have multiple elements with the same id on your page. If you want to add the same style to many elements, use class.
Add
style="clear: left;"to the div containing image with a canyon.