CODEWITHSUNDEEP
htmlcss
humberto
humberto

Reputation: 55

Divide vertical columns and align them

I'am trying to create a layout similar to the one below:

 _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
|      |                     |      |
|      |                     |      |
|      |                     |      |
|  1   |                     |   2  |
|      |                     |      |
|_ _ _ |          5          |_ _ _ |
|      |                     |      |
|      |                     |      |
|   3  |                     |   4  |
|      |                     |      |
|      |                     |      |
|_ _ _ |_ _ _ _ _ _ _ _ _ _ _|_ _ _ |

I'am having trouble in two things:

  1. Dividing vertical columns;
  2. Align 1 and 2 with 5;

The website with the example/code

Upvotes: 0

Views: 135

Answers (5)

Iren Patel
Iren Patel

Reputation: 757

Try this simple code

<table border="1">
     <tr><td >1</td><td rowspan="2" colspan="2" width="70%" align= "center" >5</td ><td >2</td></tr>
     <tr><td>3</td><td>4</td></tr>
     </table>

Upvotes: 0

Vinod VT
Vinod VT

Reputation: 7159

Try This,

<div style="width:100%">
<div style="width:15%; float:left">
    <div style="width:100%"></div>
    <div style="width:100%"></div>
</div>
<div style="width:70%; float:left">
</div>
<div>
    <div style="width:100%"></div>
    <div style="width:100%"></div>
</div>
</div>

Set height as you desired.

Upvotes: 0

Kishori
Kishori

Reputation: 1095

You can use % to mention widths of vertical columns. You can use below structure,

<div>
    <div class="leftside">
        <div class="1"></div>
        <div class="3"></div>
    <div>

    <div class="Center">
        <div class="5"></div>
    <div>
    <div class="rightside">
        <div class="2"></div>
        <div class="4"></div>
    <div>
</div>

<style>
.leftside
{
    float:left;
    width:15%;
}

.rightside
{
    float:right;
    width:15%;
}
.center
{
    floas:left;
    width:70%;
}

Upvotes: 1

interhost
interhost

Reputation: 1

Try using this CSS layout: The Square Grid

That's an awesome layout that can solve all of your problems.

Upvotes: -1

vishalkin
vishalkin

Reputation: 1235

#content {
    margin: 20px 0px 0px 20px;
    width:180px;
    background-color: green;
    overflow: auto;
    padding-left: 10px;
}

FIDDLE

Upvotes: 1

Related Questions