CODEWITHSUNDEEP
csshtmlcss-float
user2533660
user2533660

Reputation: 151

Floats affecting other divs?

I have a webpage I made here: http://jsfiddle.net/KM9HJ/

<!DOCTYPE html />
<head>

    <title>Home</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

</head>
<body>

    <div id="logo">
        <img style="width:50; height:50; float:left;" src="Content/Portal%20Layered.png"/>
        <img style="width:50; height:50; position:relative; left:-50px; z-index:2;" src="Content/Blank.png"/>
        <div><h2 id="headerh2">Cody Shearer</h2></div>
    </div>

    <div id="wrapper">

    <div style="background-color:#565656">
    <div id="links"><a href="Home.htm" class="Home" id="link">HOME</a></div>
    <div id="links"><a href="About%20Me.htm" class="AboutMe" id="link">ABOUT ME</a></div>
    <div id="links"><a href="Gallery.htm" class="Gallery" id="link">GALLERY</a></div>
    </div>
            <article id="para">
                <p>About This Website</p>
                <div id="paraL2"><p>About this page:</p> <div id="paraP">This is</div></div></article>
    </div>

</body>

If you look at the div that says "About this page:" you will see that it is positioned to the far right of the div and part of it is cut off (you may have to resize the result area to see this). What I want the words to do is to stay on one line and be aligned to the left. From what I have seen the issue can be fixed by removing the "float:left" from the #links area, or It can be helped a little by removing the "width: 150px;" from #link. The only issue is that I spent a long time trying to get other s

Upvotes: 1

Views: 3628

Answers (1)

sgun
sgun

Reputation: 899

adding clear:left may help you.

#para {
   clear:left;
   ....

Upvotes: 9

Related Questions