CODEWITHSUNDEEP
htmlcss
janhartmann
janhartmann

Reputation: 15003

Advanced table-layout to CSS

I have gotten the assignment to code a website from tables to CSS. While this is easy I have one question on how to recreate one of the site's biggest detail.

Site is: www.optimizer.dk.

How can I recreate the labels coming out of the left side, while still having the content in the middle?

Rest of the site is no worries.

Is the solution to:

     padding-left: 200000px;
     margin-left: -200000px;

To fake the expansion to the left?

Upvotes: 0

Views: 550

Answers (4)

wdm
wdm

Reputation: 7189

Ideally here you would want a fluid width. See: http://jsfiddle.net/cbNvn/1/

<div id="left">Left</div>
<div id="center">Center</div>
<div id="right">Right</div>


div {
    float: left;  
}

#left {
    width: 25%;
    text-align: right;
}

#center {
    width: 50%;
}

#right {
    width: 25%;
}

Expanding the page would expand the left column and the background image can repeat. The linked images can lay over the background as they do currently. The text-align:right attribute will keep the linked images on the right.

Upvotes: 1

thirtydot
thirtydot

Reputation: 228152

I would possibly do it like this:

Live Demo

CSS:

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    overflow-x: hidden
}
body {
    background: #eee
}
#container {
    width: 300px;
    margin: 0 auto;
    background: #bbb;
}
li, li span {
    height: 25px;
}
li {
    position: relative;
    width: 200px;
    background: #777
}
li span {
    display: block;
    position: absolute;
    width: 9999px;
    left: -9999px;
    top: 0;
    background: url(http://dummyimage.com/50x30/f0f/fff)
}

HTML:

<div id="container">
    <ul>
        <li><span></span>Menu Item</li>
    </ul>
    <div id="content">
        Hi!
    </div>
</div>

This answer was based on an older answer I wrote: 'Stretching' a div to the edge of a browser

Upvotes: 1

1ftw1
1ftw1

Reputation: 666

i would put it all in a div and set position:absolute;. then put your buttons in there own divs so you can move them.

or

put it all in a div and set the margin to -5%(mite need to play with this into it works). then make the image the background and put you text buttons in there own div's so you can move then to where you want them.

Then use float:left; to line them up

Upvotes: 0

Blowsie
Blowsie

Reputation: 40525

You need 3 divs with float:left to create the 3 columns

Upvotes: 0

Related Questions