CODEWITHSUNDEEP
csshtmllayout
user2370579
user2370579

Reputation: 361

div or table layout without clear row or column structure

I try to construct the following structure by using div-containers (form with information). I just don't get it. There is no clear column or row system. Any ideas? 

+++++++++++++++++++++++++
+       +       b       +
+   a   +++++++++++++++++
+       +   c   +       +
+++++++++++++++++   d   +
+       e       +       +
+++++++++++++++++++++++++

I should have mentioned, that a and d are fixed in width (a left aligned, d right aligned) and b,c,e (which are all left aligned) should vary in width with content.

Upvotes: 0

Views: 202

Answers (5)

Michael
Michael

Reputation: 7092

http://jsfiddle.net/tPJAQ/

Here is a method forked from FAngel's answer above.

.wrapper{
    height:/*250px*/ 100%;
    width:/*250px*/ 100%;
    overflow: visible;
    border:solid 1px black;
    box-sizing: border-box;
}
.a {
    height:66.666666%;
    width:33.333333%;
    float:left;
    border:solid 1px black;
    box-sizing: border-box;
}
.b {
    height:33.333333%;
    width:66.666666%;
    float:left;
    border:solid 1px black;
    box-sizing: border-box;
}
.c {
    height:33.333333%;
    width:33.333333%;
    float:left;
    border:solid 1px black;
    box-sizing: border-box;
}
.d {
    height:66.666666%;
    width:33.333333%;
    float:right;
    border:solid 1px black;
    box-sizing: border-box;
}
.e {
    height:33.333333%;
    width:66.666666%;
    float:left;
    border:solid 1px black;
    box-sizing: border-box;
}

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92903

You'll want to position everything absolutely:

#a,#b,#c,#d,#e {
    position: absolute;
}
#a {
    left: 0;
    top: 0;
}
#b {
    left: 100px;
    top: 0;
}
#c {
    left: 100px;
    top: 100px;
}
#d {
    left: 200px;
    top: 100px;
}
#e {
    left: 0;
    top: 200px;
}

http://jsfiddle.net/gyxJJ/1/

Upvotes: 0

FelipeAls
FelipeAls

Reputation: 22171

Here's a starter: http://jsfiddle.net/asxde/

You may or may not need to have some elements fixed width, depends on your precise design and constraints. A and D in particular.

CSS:

div {
    outline: 1px solid red;
    min-width: 100px;
    min-height: 40px;
}
.a {
    float: left;
    min-height: 80px;
}
.b {
    overflow: hidden;
    background-color: lightgreen;
}
.c {
    float: left;
}
.d {
    float: right;
    min-height: 80px;
}
.e {
    float: left;
    clear: left;
    min-width: 300px;
}

HTML:

<div class="a">aaa</div>
<div class="b">bbb</div>
<div class="c">ccc</div>
<div class="d">ddd</div>
<div class="e">eee</div>

Upvotes: 0

Mateusz
Mateusz

Reputation: 3048

Use rowspan and colspan properties of td.

Example:

<table border="1">
    <tr>
        <td rowspan="2">a</td>
        <td colspan="2" rowspan="1">b</td>
    </tr>
    <tr>
        <td>c</td>
        <td rowspan="2">d</td>
    </tr>
    <tr>
        <td colspan="2">e</td>

    </tr>
</table>

JSFiddle

Upvotes: 1

Viktor S.
Viktor S.

Reputation: 12815

See this demo: http://jsfiddle.net/T9Vvg/ You may use something like that.

CSS:

.wrapper{
    height:150px;
    width:150px;
    border:solid 1px black;
}
.a {
    height:98px;
    width:48px;
    float:left;
    border:solid 1px black;
}
.b {
    height:48px;
    width:98px;
    float:left;
    border:solid 1px black;
}
.c {
    height:48px;
    width:48px;
    float:left;
    border:solid 1px black;
}
.d {
    height:98px;
    width:48px;
    float:right;
    border:solid 1px black;
}
.e {
    height:48px;
    width:98px;
    float:left;
    border:solid 1px black;
}

HTML:

<div class=wrapper>
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
    <div class="e">e</div>
</div>

Upvotes: 0

Related Questions