DJG DJG - 4 months ago 8
HTML Question

Why aren't these images lining up with the top of the page?

The top of my page looks like this (blue bit at the top is the bottom of my bookmarks bar):

top of page

I have a wrapper div holding two imgs (left, right) and a div. I want these three things to all hug the top of the page and line up. I thought adding

display: inline
would do it, but that didn't work. Now I'm stumped.

CSS:

body {
margin:0px;
padding:0px;
}

#main{
display: inline;
}

p {
font-family:"Open Sans",sans-serif;
font-size: 14px;
}

#img1{
float:left;
}

#img2{
float:right;
}

.design-img {
/*border:1px red;*/
display: inline;
top:0px;
}


HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> </meta>

<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="js/libs/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/libs/raphael.min.js"></script>
</head>

<body>
<div id='container'>
<img src='go.jpg'/ id='img1' class='design-img'>
<div id='main'>
<h1>Table of Contents</h1>
<p></p>
</div>
<img src='go.jpg'/ id='img2' class='design-img'>
</div>


<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

Answer
#main {
    display: inline-block;
}

This should do the trick. When you set an element as an inline element it takes over the whole line. Look for the differences between inline and inline-block