CODEWITHSUNDEEP
htmlcsslayoutresponsive-design
user2793161
user2793161

Reputation: 79

HTML/CSS layout issue

I have to make a page with a responsive design and it doesn't really work out for me.

This is how the layout should look like (the black blocks are going to be images): Grid lay-out as it should be

The problem is making it responsive. On smaller screens, the shape of the layout should be the same, but has to fit the screen no matter what the size of the screen is. On wide screens, this is what the layout becomes: Grid lay-out why it's not good

I've tried several things, but the problem keeps occurring and it's not because of one line of CSS or anything, but I just don't understand how to fix the core of this problem.

Can anyone make a Fiddle to solve this, just with black boxes?

Ok, so here I have the progress. The problem is the margins. All the blocks should be 5px away from each other. When I do that, it goes wrong. Now, I have all the blocks with the right size, but I only need them to be separated 5px.

HTML:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div id="wrapper">
    <a href="#" class="link">
        <img class="mainImg" src="http://www.calvijn.nl/media/3529/IMG-      20130925-WA0001_500x500.jpg" alt="test" />
    </a>
    <a href="#" class="link">
        <img class="subImg" src="http://stage.elephantcs.nl/wp-content/uploads/2011/11/img-impression-5.jpg" alt="test" />
    </a>
    <a href="#" class="link">
        <img class="subImg" src="http://stage.elephantcs.nl/wp-content/uploads/2011/11/img-impression-5.jpg" alt="test" />
    </a>
    <a href="#" class="link">
        <img class="subImg" src="http://stage.elephantcs.nl/wp-content/uploads/2011/11/img-impression-5.jpg" alt="test" />
    </a>
    <a href="#" class="link">
        <img class="subImg" src="http://stage.elephantcs.nl/wp-content/uploads/2011/11/img-impression-5.jpg" alt="test" />
    </a>
</div>
</body>
</html>

CSS:

#wrapper {
position: absolute;
left: 5%;
right: 5%;
top: 100px;
width: 90%;
height: auto;
background: red;
}

.mainImg {
display: inline-block;
float: left;
width: 33%;
}

.subImg {
display: inline-block;
float: left;
width: 33%;
}

Here's a fiddle: Fiddle

So, how can I pull the blocks apart?

Thanks in advance!

Upvotes: 0

Views: 107

Answers (2)

Zword
Zword

Reputation: 6787

See this fiddle / Watch Fullscreen

HTML

<div id="container">
    <div class="inner">
        <div></div>
    </div>
    <div class="inner">
        <div></div>
        <div></div><br/>
        <div></div>
        <div></div>
    </div>
</div>

CSS

html,body,#container{
    width:100%;
    height:100%;
    margin:0 auto;
    padding:0 auto;
    white-space:nowrap;
    font-size:0px;
}
.inner{
    display:inline-block;
    height:100%;
    white-space:nowrap;
}
.inner:nth-child(1){
    width:30%;
    vertical-align:top;
    margin-right:5px;
}
.inner:nth-child(2){
    width:70%;
}
.inner div{
    display:inline-block;
    border-left:3px solid white;
    border-top:3px solid white;
    background-color:black;
}
.inner:nth-child(1) div{
    width:100%;
    height:100%;
    padding-top:3px;
}
.inner:nth-child(2) div{
    width:50%;
    height:50%;
}

New Fiddle

Upvotes: 1

Vangel Tzo
Vangel Tzo

Reputation: 9313

You should apply min-height to solve this issue.

An example here : http://jsfiddle.net/vRPfq/1/

But this will have impact to your images ofcourse.

Upvotes: 1

Related Questions