Arranging Div Elements in a Specific Layout

Question

Arranging Div Elements in a Specific Layout

I am currently experimenting with http://jsfiddle.net/ngZdg/

My main goal is to create a parallax website, but I am facing some challenges with the initial layout. I am aiming for the following design:

-------------------------------------
|                                    |
|                                    |
|           ______  ______           |
|           |       |     |          |
|           |       |     |          |
|           ______  ______           |
|                   |     |          |
|                   |     |          |
|                   ______           |
|                                    |
-------------------------------------

Does anyone have any suggestions?

html css

Answer 1

Answer №1

Check out this link:

@charset"utf-8";
 #main {
    background-color:pink;
    width:1280px;
    height:100%;
    position:absolute;
}
#chapter1 {
    background: blue;
    width:90%;
    height:90%;
}
#chapter1_1 {
    background-color:red;
    width:100px;
    height:100px;
    left:100px;
    top:50px;
    position:absolute;    
}
#chapter1_2 {
    background-color:yellow;
    width:100px;
    height:100px;
    left:205px;
    top:50px;
    position:absolute;
}
#chapter1_3 {
    background-color:green;
    width:100px;
    height:100px;
    top:155px;
    left:205px;
    position: absolute;
}

Don't forget to properly close your <DIV> tags.

<div class="whatever" />

Remember, it should be like this:

<div class="whatever"></div>

Answer 2

Check out this link:

@charset"utf-8";
 #main {
    background-color:pink;
    width:1280px;
    height:100%;
    position:absolute;
}
#chapter1 {
    background: blue;
    width:90%;
    height:90%;
}
#chapter1_1 {
    background-color:red;
    width:100px;
    height:100px;
    left:100px;
    top:50px;
    position:absolute;    
}
#chapter1_2 {
    background-color:yellow;
    width:100px;
    height:100px;
    left:205px;
    top:50px;
    position:absolute;
}
#chapter1_3 {
    background-color:green;
    width:100px;
    height:100px;
    top:155px;
    left:205px;
    position: absolute;
}

Don't forget to properly close your <DIV> tags.

<div class="whatever" />

Remember, it should be like this:

<div class="whatever"></div>

Answer 3

Answer №2

Your closure of the div tags in the fiddle was incorrect, resulting in a layout similar to your diagram.

<div id="main">
    <div id="chapter1">
        <div id="chapter1_1"></div>
        <div id="chapter1_2"></div>
        <div id="chapter1_3"></div>
    </div>
</div>

CSS:

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
} 
#main {
    background-color:#00FF00;
    width:100%;
    height:100%;
    /*position:absolute;
    left:50%;
    margin-left:-640px;*/
}
#chapter1 {
    background: blue;
    height:100%;
    position:relative;
    width:100%
}
#chapter1_1,
#chapter1_2,
#chapter1_3 {
    height:20%;
    width:20%;
    position:absolute;
}
#chapter1_1 {
    background-color:red;
    top:10%;
    left:30%;    
}
#chapter1_2 {
    background-color:yellow;
    left:50%;
    top:10%;
}
#chapter1_3 {
    background-color:green;
    top:30%;
    left:50%;
}

Answer 4

Your closure of the div tags in the fiddle was incorrect, resulting in a layout similar to your diagram.

<div id="main">
    <div id="chapter1">
        <div id="chapter1_1"></div>
        <div id="chapter1_2"></div>
        <div id="chapter1_3"></div>
    </div>
</div>

CSS:

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
} 
#main {
    background-color:#00FF00;
    width:100%;
    height:100%;
    /*position:absolute;
    left:50%;
    margin-left:-640px;*/
}
#chapter1 {
    background: blue;
    height:100%;
    position:relative;
    width:100%
}
#chapter1_1,
#chapter1_2,
#chapter1_3 {
    height:20%;
    width:20%;
    position:absolute;
}
#chapter1_1 {
    background-color:red;
    top:10%;
    left:30%;    
}
#chapter1_2 {
    background-color:yellow;
    left:50%;
    top:10%;
}
#chapter1_3 {
    background-color:green;
    top:30%;
    left:50%;
}

Answer 5

Answer №3

Just made some updates to the fiddle - changed the background to absolute and adjusted the positions of other divs accordingly

If you want to check it out, here's the link: http://jsfiddle.net/MarmeeK/ngZdg/19/

This is how the CSS looks:

@charset"utf-8";
 #main {
    background:pink;
    width:1280px;
    height:900px;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    margin:0;
    padding:0;
}
#chapter1 {
    margin:100px auto 100px auto;
    background: blue;
    height:500px;
    width:800px;
    padding:100px;
}
#chapter1_1, #chapter1_2, #chapter1_3 {
    width:200px;
    height:200px;
    position:relative;
    display:block;
    margin:0;
    padding:0;
    float:left;
}
#chapter1_1 {
    background-color:red;
    left:100px;
}
#chapter1_2 {
    background-color:yellow;
    left:100px;
}
#chapter1_3 {
    clear:both;// to clear the float to next line.
    background-color:green;
    left:300px;
}

I believe this should work perfectly now! :)

Answer 6

Just made some updates to the fiddle - changed the background to absolute and adjusted the positions of other divs accordingly

If you want to check it out, here's the link: http://jsfiddle.net/MarmeeK/ngZdg/19/

This is how the CSS looks:

@charset"utf-8";
 #main {
    background:pink;
    width:1280px;
    height:900px;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    margin:0;
    padding:0;
}
#chapter1 {
    margin:100px auto 100px auto;
    background: blue;
    height:500px;
    width:800px;
    padding:100px;
}
#chapter1_1, #chapter1_2, #chapter1_3 {
    width:200px;
    height:200px;
    position:relative;
    display:block;
    margin:0;
    padding:0;
    float:left;
}
#chapter1_1 {
    background-color:red;
    left:100px;
}
#chapter1_2 {
    background-color:yellow;
    left:100px;
}
#chapter1_3 {
    clear:both;// to clear the float to next line.
    background-color:green;
    left:300px;
}

I believe this should work perfectly now! :)

Arranging Div Elements in a Specific Layout

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to include an image in a bootstrap carousel?

Retrieve information from an HTML form

How to prevent jQuery from continually recalculating width on window resize?

Error: Unexpected end of argument list in file c:/.../list.ejs during ejs compilation

How to eliminate the unnecessary gap between rows in a Vue div displayed as a grid

Navigating the rollout of a fresh new design

Limit selection choices in select element

jQuery User interface smooth scrolling feature

Steps to align the table to the left with the header

Is there a way to preserve the HTML template code as it is when saving it in a cell?

Calculate the dimensions of each list item and dynamically increase the size of the unordered list with jQuery

Deleting a segment of code in HTML with Python

What could be causing the search function of the datatable to be hidden?

Having difficulty grasping the concept behind the prepend method's functionality

What is the best way to enclose a handlebars expression within a span element while also making the span clickable?

Best practices for organizing fonts in SCSS 7-1 architecture?

Struggling to make AngularJS routes function properly

Transforming a dynamic HTML layout into a non-responsive one: "RESPONSIVE NO MORE"

"JavaScript issue: receiving 'undefined' when trying to retrieve input

Trouble with Divs and Element Placement