HTML DIV Layout

Question

I wish to create a simple layout like below.

Div Layout

Can someone please tell me how I can achieve this? Please forgive the "frankness", I come from a C# background so developing a WEB UI is slightly daunting for me.

Update: I'm juggling around with 's and CSS but not producing what I want.

why have someone gave -1 for this question? Please explain it — MikroDel, Nov 27 '12 at 13:48
@MikroDel I gave the question a -1 as it's very broad and vauge - you'd probably be best googling "columns with css" than asking here — Sean, Nov 27 '12 at 13:57
If html layout was rocket science then it would be too broad. But it isn't. The length of the answers which correctly answer the stated question shows it wasn't too broad. — , Apr 22 '15 at 19:12

score 12 · Accepted Answer · edited Nov 27 '12 at 14:47

12

This may help you:

<body>
<div style="border: 1px solid; float: right; width: 25%; height: 1000px;" id="1">one</div>
<div style="border: 1px solid; height: 250px; width: 74%;" id="1">two</div>
<div style="border: 1px solid; width: 35%; float: right; height: 750px;" id="1">three</div>
<div style="border: 1px solid; width: 35%; height: 750px;" id="1">four</div>
</body>

edited Nov 27 '12 at 14:47

MikroDel

6,705
7
39
74

answered Nov 27 '12 at 14:00

Sarang

171
8

one
two

three

four
– Sarang Nov 27 '12 at 14:05

score 5 · Answer 2 · answered Nov 27 '12 at 13:54

While we could write out all the code you'll need to implement this layout, it would not be beneficial to you if you do not know CSS. We can however point you in the right direction.

This can be achieved using the Float rule with CSS. Here's a link

A good basic understanding of HTML should also be had for laying this out semantically. Codecademy will take you through both HTML and CSS if you need help with all of it.

Alejandro · Answer 3 · 2016-04-27T20:16:02.183

<HTML>
    <HEAD>
        <TITLE>Working with div</TITLE>
        <META CHARSET="UTF-8" />
    </HEAD>
    <BODY>

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


        <div class="a2">two</div>
        <div class="a1">one</div>
        <div class="VerticalSpace"></div>
        <div class="a3">three</div>
        <div class="HorizontalSpace"></div>
        <div class="a4">four</div>

    </BODY>
</HTML>

and the content of div.css file is

    .a1, .a2, .a3, .a4
    {
        border: 4px solid;
    }

    .VerticalSpace, .HorizontalSpace
    {
        border: 0px;
        float: left;
    }

    .a2
    {
        height: 250px;
        float: left;
        width: 74%;
    }

    .a3
    {
        height: 350px;
        float: left;
        width: 35%;
    }

    .a4
    {
        height: 350px;
        float: left;
        width: 35%;
    }

    .a1
    {
        height: 617px;
        width: 23%;
        float: right;
    }

    .VerticalSpace
    {
        width: 60%;
        height: 10px;
    }

    .HorizontalSpace
    {
        height: 350px;
        width: 4%;
    }

score 1 · Answer 4 · edited May 23 '17 at 12:17

1

Two column div layout with fluid left and fixed right column
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
These link tell you how to handle two columns layout. First just do it to have two columns Left and Right, after that, do it again for the Left columns.

edited May 23 '17 at 12:17

Community

1
1

answered Nov 27 '12 at 13:50

nvcnvn

4,991
8
49
77

score 1 · Answer 5 · answered Nov 27 '12 at 13:52

1

A CSS grid system, like 960.gs, or Twitter's bootstrap will help massively in getting layouts to work as you want them to.

answered Nov 27 '12 at 13:52

danwellman

9,068
8
60
88

HTML DIV Layout

5 Answers5