Flipped 'c' Layout help please

HTML & CSS
1

Hello,

I’m trying to make layout to form a bordered flipped ‘C’. I’m attaching the files to show how far I’ve reached.

I’m having trouble in these two things:

  1. How do I join the top border of the “header”, the bottom border of the “footer” with the right order of the “sidebar”?

  2. How do I make the width of sidebar equal to that of “wrap” without absolutely defining. If I make “sidebar” a child element of “wrap”, then the float does not work correctly. Float is left in “wrap” and right in “sidebar”.

PFA a draft of the layout. I hope I’ve made it clear what I want to get.

Can anyone help me with this one, please? This would really help me.

2

I’m not sure since I can’t see your image yet, but would something like this help?


/* HTML */
<div id="header"></div>
<div id="content"></div>
<div id="right"></div>
<div id="footer"></div>



/* CSS */
#content {
  float: left;
  width: 800px;
}

#right {
  float: right;
  width: 200px
}

#footer {
  clear: both;
}

It sounds like something you’ll have to do (depending what’s in your header and footer), you’ll probably have to use a fixed with layout where your header, footer, and a wrapper around right all have the same width. Then floating the right one right should line them all up.

3

Hi,

Do you mean something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.wrap {
    width: 960px;
    border: 1px dotted black;
    padding: 20px;
    margin:0 auto 50px;
}
.inner {
    border:1px solid #000;
    border-left:none;
    width:959px;
    overflow:hidden;
}
.content {
    width:739px;
    border-right:1px solid #000;
    float:left;
    padding:10px;
}
.sidebar {
    width:160px;
    margin:0 -160px 0 0;
    float:right;
    position:relative;
    left:20px;
    display:inline;
}
.main {
    width:100%;
    float:left;
}
.header, .footer {
    margin:0 199px 0 0;
    border-bottom:1px solid #000;
    font-size:120%;
    clear:both;
}
.footer {
    border:none;
    border-top:1px solid #000
}
.footer p {
    margin:0;
}
</style>
</head>
<body>
<div class="wrap">
    <div class="inner">
        <h1 class="header">header</h1>
        <div class="content">
            <div class="sidebar">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. </p>
            </div>
            <div class="main">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. </p>
            </div>
        </div>
        <div class="footer">
            <p>Footer</p>
        </div>
    </div>
</div>
<hr>
<div class="wrap">
    <div class="inner">
        <h1 class="header">header</h1>
        <div class="content">
            <div class="sidebar">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. m. </p>
            </div>
            <div class="main">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. </p>
            </div>
        </div>
        <div class="footer">
            <p>Footer</p>
        </div>
    </div>
</div>
</body>
</html>
4

@samanime: Thanks for your help…you got it…I wanted something similar…
@paul: Thanks a TON for your help. thts exactly what I needed!! Paul, if you have the time, will you explain some things to me in this:

  1. why did you change my usage of id’s in this to classes? These layouts are going to be used only once, right? Should Id’s have done the thing?

  2. In header and footer classes, why is a right margin of 199px not making the borders go left by the same amount?

I’m really confused on how you managed to join the lines of the header, footer and sidebar like I wanted.

If you have the time, please explain it to me.

Thanks a lot for your help, though.

Thank you everyone! :slight_smile:

5

I only changed them for my example because I gave you two versions (one under each other but with more content to show the effect) and if I had used ids some smart alec would have said that it was invalid.:slight_smile:

Use ids for main structural and unique elements but use classes when you want to re-use them again.

  1. In header and footer classes, why is a right margin of 199px not making the borders go left by the same amount?

I’m really confused on how you managed to join the lines of the header, footer and sidebar like I wanted.

That was a trick to get the top and bottom lines working. The header and footer are actually as wide as the whole layout (including sidebar) and if left alone the bottom border on those elements would go all the way to the right and ruin the effect.

I just gave them a margin-right to match the sidebar space so that they were shorter and the border then matched up with the design.

The rest of the layout is achiebved using a negative margin effect. The main trick is an equalising column trick and all stems from this code:


.content {
    width:739px;
    border-right:1px solid #000;
    float:left;
    padding:10px;
}
.sidebar {
    width:160px;
    margin:0 -160px 0 0;
    float:right;
    position:relative;
    left:20px;
    display:inline;
}

The sidebar is actually inside the content div and will affect the height of .content in the usual way. Using a negative margin we pull the sidebar out of .content into the gap that I prepared earlier on the right side.

It now looks like we have two columns but in effect .sidebar is still part of .content and when it grows in height then so will .content

The rest is smoke and mirrors :slight_smile: