Solved! HTML/CSS problem, Can someone find my mistake?

andrija.puletic · Oct 18, 2018

I have just began coding in HTML and I am getting ready for my first exam but I have already found a problem. I can not align side div to the left side, two divs are acting as one even tho I have chosen different classes. Also I do not now how to move up Contacts and About tab a bit. Here it is:
<!DOCTYPE html>
<html>
<head>
<style>
.lol ul li {
display: inline;
margin-left: 10px;
margin-bottom: 10px;
border-right: 1px solid white;
overflow: hidden;
float: right;
padding: 0px 5px;

}

div ul {
margin-right: 20px;
margin-bottom: 20px;
}
.lol {
padding: 5px ;
background-color: black;
color: white;
height: 30px;

}
.side {

background-color: black;
align: left;
width: 100px;
height: 500px;
}

</style>

<title>Page Title</title>
</head>
<body>

<div class="lol">
<ul>
<li> Contact </li>
<li> Phone </li>
<ul/>
<div/>
<div class="side">

<div/>

<body/>
<html/>

ChumP · Oct 18, 2018

<body> element has by default padding and margin so I removed it... that's why your side div had an offset.
Also the <ul> list had no height so I gave it 100% (max height of the parent div) and then applied padding.
You had some of those divs and other tags (your body, html, etc.) closed like this: <div> ... <div/> - it's wrong.... either close it like this <div class="side">...</div> or like this <div class="side" />.
Here's the updated code:

HTML:

<!DOCTYPE html>
<html>
<head>
<style>

li
{
  margin-left: 10px;
  margin-bottom: 15px;
  border-right: 1px solid white;
  overflow: hidden;
  float: right;
  padding: 0px 5px;
}

body{
  margin:0;
  padding:0;
}

ul
{
  margin:0;
  padding-top:5px;
  padding-right:20px;
  height:100%;
}

.lol
{
  padding: 5px ;
  background-color: black;
  color: white;
  height: 30px;
}
.side
{
  background-color: black;
  align: left;
  width: 100px;
  height: 500px;
}


</style>

<title>Page Title</title>
</head>
<body>



<div class="lol">
  <ul>
    <li> Contact </li>
    <li> Phone </li>
  </ul>
</div>

<div class="side"></div>

</body>
</html>

Search

Solved! HTML/CSS problem, Can someone find my mistake?

andrija.puletic

ChumP

ChumP

Estimable

Similar threads

TRENDING THREADS

Moderators online

Share this page