CODEWITHSUNDEEP
htmlcssborder
Tux
Tux

Reputation: 77

CSS Border spanning across another div

The problem is that the border of div#content also appears in div#navigation?

<html>
    <head>
        <title>WUI</title>

        <style type="text/css">
            div#header {
            }

            div#navigation {
                float: left;
                padding-right: 20pt;
            }

            div#content {
                border: 5px groove;
            }
        </style>
    </head>

    <body>
        <div id="header">
            <h1>WUI</h1>
        </div>
        <br />
        <div id="navigation">
            <ul>
                <li>Home</li>
                <li>Login</li>
            </ul>
        </div>
        <div id="content">
            <p>I like when you ride with that booty on me!</p>
        </div>
    </body>
</html>

EDIT: I want the left side (navigation) to appear as a sidebar to the left and the content after that (to the right). I'm applying the border to the content but that border also appears in div of navigation. I hope it is clear now.

Upvotes: 0

Views: 795

Answers (7)

sandeep
sandeep

Reputation: 92793

you need to give float to the content because you give float to the navigation. use this example:

    <style type="text/css">
        div#header {
        }

        div#navigation {
            float: left;
            padding-right: 20pt;
        }

        div#content {
            float: left;
            border: 5px groove;
        }
    </style>

Upvotes: 1

Jay
Jay

Reputation: 1404

This one may works:

WUI

    <style type="text/css">
        div#header {
            display:block;
        }

        div#navigation {
            width:150px;
            float:left;
        }

        div#content {
            border: 5px groove;
            margin-left:160px;
        }
    </style>
</head>

<body>
    <div id="header">
        <h1>WUI</h1>
    </div>


    <div id="navigation">
        <ul>
            <li>Home</li>
            <li>Login</li>
        </ul>
    </div>

    <div id="content">
        <p>I like when you ride with that booty on me!</p>
    </div>

</body>

Upvotes: 0

Blender
Blender

Reputation: 298176

You need an overflow: auto; for your div#content. It's magical, hence no explanation will be given:

        div#content {
            border: 5px groove;
            overflow: auto;
        }

Well, after your edit, I can see your border isn't the problem. I usually do this:

html
{
  background-color: white;
}

body
{
  padding-left: 200px;
  background-color: green;
}

#navigation
{
  position: fixed;
  width: 200px;
  left: 0px;
  top: 0px;
}

It makes you navigation static, and the content just magically works. The downside is that you have to use pixel-based layouts, which I don't really like doing. It's your choice.

Here's a semi-relevant thing I made a while back. See if it works for you: http://jsfiddle.net/dDZvR/12/

Upvotes: 4

robobooga
robobooga

Reputation: 513

you can add a

float: left;

in content and set the width yourself

Upvotes: 0

Sparky
Sparky

Reputation: 4879

It can be corrected by adding a left margin to the div#content. The corrected code is here - http://jsfiddle.net/sparky/vctcN/

Upvotes: 0

sevenseacat
sevenseacat

Reputation: 25029

navigation is floating, which means it's taken out of the document flow, and the next element (content) moves up to take it's place.

However, navigation still has to float somewhere, so it's taking up space inside content.

To avoid this, either float content as well, or put a left margin on it equivalent to the width of navigation.

edit: after seeing your edit, I'd say the left margin idea would definitely be the better one.

Upvotes: 2

crimson_penguin
crimson_penguin

Reputation: 2778

It's because of how floats work. You're going to have to put a margin on #content or something like that.

Upvotes: 0

Related Questions