Pondering Peridot Pondering Peridot - 6 months ago 18
CSS Question

A <div> of mine isn't going where it's supposed to, and the only way I know how to fix it pushes the <p> out of the <div>

I have a that is supposed to fit under one and to the left of another , and it's going under where the to the left ends because of it's 'clear:both' property for its id in my CSS file. But if I change that property in any way, and the goes to where it's supposed to. If that sounded confusing, that's okay, because I know I probably did a terrible job of wording it, so I'll just show you.

1920x1080 view of a site for 1366x768 PCs. Displays layout along with problematic <div> and where it should be.

Here's the code for the site, both its HTML and its CSS. Again, the s I'm concerned about are "text", which is the that's being misplaced. The that's should be right above it is the one with the text "About me", its id is "main". The with the 3 pictures in it has the id of "picture".

The HTML:

<!doctype HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>
</title>
</head>
<body>
<div id="banner" id="banner"></div>
<a href="index.html"><div id="button"><p id="p1">Home</p></div></a>
<a href="about.html"><div id="button"><p id="p1">About Me</p></div></a>
<a href="career.html"><div id="button"><p id="p1">Career</p></div></a>
<a href="school.html"><div id="fixbutton"><p id="p1">Schooling</p></div></a>
<div id="main"><p align="center" style="font-size:400%">About Me</p></div>
<div id="picture"><img height="575" width="751" src="4-photos-art.jpg"/></div>
<div id="additionaltext"></div>
<div id="text"><p id="p1">As an individual, I like to think of myself as a very artistic and creative person. My hobbies are mostly just me drawing and playing my instrument. My ideal career would be in art and/or music.</p></div>
</body>
</html>


The CSS:

#banner {
background-color:#FFFFFF;float:left;width:30%;height:71px;border:2px solid;
}

#button {
background-color:#FFFFFF;border:2px solid;float:left;width:15%;height:71px;
}

#fixbutton {
background-color:#FFFFFF;border:2px solid;float:left;width:15%;height:71px;
}


#main {
background-color:#FFFFFF;height:204px;width:23%;float:left;border:2px solid;
}

#picture {
background-color:#FFFFFF;height:575px;width:55%;float:left;border:2px solid;
}

#text {
background-color:#FFFFFF;height:650px;width:23%;border:2px solid;text-align:center;clear:right;
}

#additionaltext {
background-color:#FFFFFF;height:575px;width:21%;float:right;border:2px solid;
}

#p1 {
text-align:center;font-size:150%;
}

#button:hover {
background-color:#ffff99;
}

#fixbutton:hover {
background-color:#ffff99;
}

Answer

I think this edit will help you :)

I just change your div to inside of main div. Also i make few change on css about pixels.

#banner {
    background-color:#FFFFFF;float:left;width:30%;height:71px;border:2px solid;
}

#button {
    background-color:#FFFFFF;border:2px solid;float:left;width:15%;height:71px;
}

#fixbutton {
    background-color:#FFFFFF;border:2px solid;float:left;width:15%;height:71px;
}


#main {
    background-color:#FFFFFF;height:204px;width:23%;float:left;border:2px solid;
}

#picture {
    background-color:#FFFFFF;height:575px;width:55%;float:left;border:2px solid;
}

#text {
    background-color:#FFFFFF;height:370px;width:100%;border:2px solid;text-align:center;clear:right;
}

#additionaltext {
    background-color:#FFFFFF;height:575px;width:20%;float:right;border:2px solid;
}

#p1 {
    text-align:center;font-size:150%;
}

#button:hover {
    background-color:#ffff99;
}

#fixbutton:hover {
    background-color:#ffff99;
}
<!doctype HTML>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <title>
    </title>
</head>
<body>
    <div id="banner" id="banner"></div>
    <a href="index.html"><div id="button"><p id="p1">Home</p></div></a>
    <a href="about.html"><div id="button"><p id="p1">About Me</p></div></a>
    <a href="career.html"><div id="button"><p id="p1">Career</p></div></a>
    <a href="school.html"><div id="fixbutton"><p id="p1">Schooling</p></div></a>
    <div id="main"><p align="center" style="font-size:400%">About Me</p
      >
  <div id="text"><p id="p1">As an individual, I like to think of myself as a very artistic and creative person. My hobbies are mostly just me drawing and playing my instrument. My ideal career would be in art and/or music.</p></div>
  </div>
    <div id="picture"><img height="575" width="751" src="4-photos-art.jpg"/></div>
    <div id="additionaltext"></div>
    
</body>
</html>