CODEWITHSUNDEEP
htmlcss
Dennis Kreminsky
Dennis Kreminsky

Reputation: 2089

Tricky HTML layout

Can anyone think of a way to approach converting the following scheme into a non-table html layout?

enter image description here

A few things worth mentioning, perhaps.

Thanks in advance!

Upvotes: 19

Views: 663

Answers (5)

Dennis Kreminsky
Dennis Kreminsky

Reputation: 2089

Solved, though not perfect with dynamic margins (calculated for each element in js/php/whatever) and the narrow elements needing a dynamically calculated height.

enter image description here

And the screenshot:

enter image description here

Upvotes: 1

stecb
stecb

Reputation: 14766

Ok.. it's VERY hard :) ..btw, if the text inside of it is 'static', you could do some tricks with floats and negative margins this way:

http://www.jsfiddle.net/steweb/Xa5X6/

I know it's not the best result, but it could be a way to start with :)

markup:

<div class="wrapper">
    <div class="column">
        <div id="sq-1"></div>
        <div id="rect-1"></div>
    </div>
    <div class="column">
        <div id="sq-2"></div>
        <div id="rect-2"></div>
    </div>
    <div class="column main">
        <div class="text-container-1">
            <div class="text-1">
                text 
            </div>
            <div class="text-2">
                text 
            </div>
        </div>
        <div class="text-3">text </div>
        <div class="text-4">text</div>
        <div class="text-5">text</div>
    </div>
</div>

css:

.wrapper{
    overflow:hidden;
    background:#777;
    display:inline-block;
}
.column{
    float:left;
}
#sq-1{
    width:20px;
    height:21px;
}
#sq-2{
    width:20px;
    height:21px;
    margin-top:20px;
    border-top:2px solid #FFFFFF;
}
#rect-1{
    height:104px;
    border-right:2px solid #FFFFFF;
}
#rect-2{
    height:82px;
    border-right:2px solid #FFFFFF;
}

.text-container-1{
    width:200px;
    border-right:2px solid #FFFFFF;
}
.text-1, .text-2{
    border-bottom:2px solid #FFFFFF;
}
.text-3{
    float:left;
    width:220px;
    margin-top:-44px;
    padding-top:54px;
    padding-bottom:10px;
    border-bottom:2px solid #FFFFFF;
    border-right:2px solid #FFFFFF;
}
.text-4{
    float:left;
    width:240px;
    margin-left:-222px;
    margin-top:-44px;
    padding-top:84px;
    border-bottom:2px solid #FFFFFF;
    border-right:2px solid #FFFFFF;
}
.text-5{
    float:left;
    width:260px;
    margin-left:-242px;
    margin-top:-44px;
    padding-top:104px;
    border-bottom:2px solid #FFFFFF;
    border-right:2px solid #FFFFFF;
}

In this example, you have to assign static heights to the elements on the left. Moreover, the negative margins of the elements on the right are static too.

static text => static dimensions/margins => a kind of weird result

If the text is dynamic, I think achieving a result without using JS and/or tables is almost impossible, also because these 'L' elements and theirs widths/heights are hard to manage.

dynamic text => swearing

Upvotes: 12

themajiks
themajiks

Reputation: 414

I think you should have a wrapper and inside that, you should declare a separate div for each text layer. float that left and some margins will fix that. Try to declare every div nested so that the divs can expand accordingly.

Upvotes: 0

Harish
Harish

Reputation: 226

Define a CSS template for adding each component. One for the vertical part and the other for the horizontal part as L shapes are not possible directly and add them as per your requirement dynamically.

Upvotes: 0

steinberg
steinberg

Reputation: 620

use absolute positioning and layer the divs by the zindex of the div

Upvotes: 0

Related Questions