Help with Positioning

Get Started
1

Hello Sitepoint fellows,

I am trying to position and image on the left side of the page, and have written work beside it, on the right. I tried using overflow:hidden, along with setting the two divs(one for the image, one for the written work). Any suggestions? Thank you!

<!DOCTYPE HTML>
<html lang = "en">
  <head>
  <meta charset = "utf-8"/>
  <title>Values<title>
  <link href = "style1.css" rel = "stylesheet" type = "text/css"/>
  </head>
<body>
<div id = "header">
  <div id = "title">
    <h1>Value</h1>
  </div> <!-- end of title -->
  <div id = "login">
    <h1>Login</h1>
    <p>User name : XXXXXX</p>
    <p>Password : XXXXX</p>
  </div> <!-- end of login -->
</div> <!-- end of header -->
</hr>
<div id = "mid">
<div id = "navigation">
  <ul>
  <li><a href = "main.html">Main</a></li>
  <li><a href = "about.html">About</a></li>
  </ul>
</div> <!-- end of navigation -->



  <div id = "paragraph">
    <h1>Value</h1>
    <ul>
    <li><p>Value</p></li>
    <li><p>Vaue</p></li>
    <li><p>Value</p></li>
    </ul>
    <h1>Value</h1>
    <ul>
    <li><p>Value</li></p>
    <li><p>Value</li></p>
    </ul>
      <div id = "image">
    <img src = "bobby.jpg" width = "160" height = "320" alt = "This is Bobby's face!"/>
  </div> <!-- end of image -->
  </div> <!-- end of paragraph -->
</div> <!-- end of mid -->

/* CSS for folder "Bobby" */

body {
  background-color: blue;
  }

#header { overflow: hidden; }

#title {
  font-size: 130%;
  float: left; }

#login {
  float: right; }

#mid { overflow: hidden; }

#image { float: left;
}

#paragraph { float: right; }
2

Just create one div

remove #image from your css

instead

create in your css

#paragraph img {
float:left;
}

<div id=“paragraph”>
some text you want
<img src = “bobby.jpg” width = “160” height = “320” alt = “This is Bobby’s face!”/>
</div>

or just do the following, either way you still want to remove #image from your css

<div id=“paragraph”>
some text you want
<img style=“float:left” src = “bobby.jpg” width = “160” height = “320” alt = “This is Bobby’s face!”/>
</div>

I would also suggest using classes instead of id’s this way you can use the styling across mutlple pages easier…

/snip

3

Plz i gat a question?
How do i place some text beside an image? Whenever i try it, the text goes to the lower part of the image.

4

Do you mean you want the text aligned at the top of the image, rather than the bottom? Or do you want the text aligned vertically to the middle of the image?

Show us the HTML and CSS you’re using, and we’ll have a better idea of what you’re trying to achieve and how to help.

5

I was able to place the image and the text side-by-side by using the method you (TechnoBear) gave me when i needed help for tables. What i want to know now is how to align the image to the center and let the text be below the image in another line.
I can’t drop the html and css now, cos am on mobile. TIA.

6

Hey Black Max

Why did you edit my post… I have no signature, haven’t created one. Are you saying what I end every post with is a fake sig?

Please respond…

Never mind I re-read the rules and I understand why you think it’s a fake. Sorry, but it’s just what I normally add to my post. I will withhold posting it in the future…

But for the record, It was never intended to be a signature… I even told Sarah in the greeting email I use it on every post and nothing was said about it. Does that make a difference…

7

Well, without the code I’m still guessing at what you’re trying to achieve. If it’s something like an image with a caption, so you want the caption centred, too, you could use:

<div id="whatever">
<img src="foo" width="x" height="y" alt="description">
<p>Your text goes here</p>
</div>

and

#whatever {text-align: center;}
8

Okies, Thanks. I’ll try it and get back to you.