Simple CSS\HTML DIV Layout Issue

Question

Hoping someone can help here - been trying to get this working for a while and getting nowhere.

I'm playing about with a simple (or so it seems) CSS\HTML layout that will display one large (500px) box on the left and six smaller (250px) boxes beside it. Something like this:

|----|--|--|--|
|    |  |  |  |
|    |--|--|--|
|    |  |  |  |
|----|--|--|--|

But no matter how I try, the second row of smaller boxes always jumps below the larger one, rather than sitting below the first. More like this:

|----|--|--|--|
|    |  |  |  |
|    |--|--|--|
|    |
|----|---
|  |  |  |
|__|__|__|

I've copied my markup in below - I'm probably missing something really obvious here, so any help would be welcomed (the dashed borders here are more for my own sanity, so I can see the layout of each DIV).

#contentbox {
    max-width:1300px;
    border:1px dashed blue;
    text-align:center;
    font-size:0;
    margin: 4% auto;
}
#bigbox {
    width:500px;
    height:500px;
    border:1px dashed blue;
    display:inline-block;
}
#box {
    width:250px;
    height:250px;
    border:1px dashed blue;
    display:inline-block;
    vertical-align:top;
}

<!DOCTYPE html>

<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">

    <title></title>
</head>

<body>
    <div id="contentbox">
        <div id="bigbox"></div>
        <div id="box"></div>
        <div id="box"></div>
        <div id="box"></div>
        <div id="box"></div>
        <div id="box"></div>
        <div id="box"></div>
    </div>

</body>

</html>

JSFiddle

DaniP · Accepted Answer · 2015-02-12 14:12:56Z

2

You can use float instead of inline-block. Also ID must be unique use classnames instead to refer multiple elements:

#contentbox {
  width: 1000px;
  border: 1px dashed blue;
  text-align: center;
  font-size: 0;
  margin: 4% auto;
}
.bigbox {
  width: 500px;
  height: 750px;
  border: 1px dashed blue;
  float: left;
  box-sizing: border-box;
}
.box {
  box-sizing: border-box;
  width: 250px;
  height: 250px;
  border: 1px dashed blue;
  float: left;
}
/*Clear Floats*/
#contentbox:after {
  content: " ";
  display: Table;
  clear: both;
}

<div id="contentbox">
  <div class="bigbox"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

answered Feb 12, 2015 at 14:12

DaniP

38.3k9 gold badges68 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andy Jarvis Over a year ago

Tremendous. I've been pulling my hair our for ages trying to get this working - thanks a lot for the assistance here.

DaniP Over a year ago

Np mate @AndyJarvis glad to help U don't forget to mark it as solved

Peter Zhu · Accepted Answer · 2015-02-12 14:27:59Z

using another div to wrap two vertical boxes may solve your problem.

Here I use another Div called box_wrapper, with width 250 and height 500. this div contain 2 boxes so they can arrange vertically.

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">

<title></title>
</head>

<body>
<div id="contentbox">
    <div id="bigbox"></div>
    <div id="box_wrapper">
        <div id="box"></div>
        <div id="box"></div>
    </div>
    <div id="box_wrapper">
        <div id="box"></div>
        <div id="box"></div>
    </div>
    <div id="box_wrapper">
        <div id="box"></div>
        <div id="box"></div>
    </div>
</div>
</body>
</html>

css code here:

#contentbox {
    max-width:1300px;
    border:1px dashed blue;
    text-align:center;
    font-size:0;
    margin: 4% auto;
}
#bigbox {
    width:500px;
    height:500px;
    border:1px dashed blue;
    display:inline-block;
}
#box {
    width:250px;
    height:250px;
    border:1px dashed blue;
    display:inline-block;
    vertical-align:top;
}
#box_wrapper {
    width:250px;
    height:500px;
    border:1px dashed red;
    display:inline-block;
    vertical-align:top;
}

Collectives™ on Stack Overflow

Simple CSS\HTML DIV Layout Issue

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related