Aligning div elements side-by-side

Question

I have a page on a project I'm creating for class where I wanted to align an image in the left side, with the text to the right aligned in the middle of the image. Instead of using html elements, I decided to try an internal CSS div elements within my external CSS. My problem is that I can't get them to align correctly vertically. I have the horizontal alignment, but the text either appears one line above or one line below the image. I tried the techniques included in this posting, but they didn't fix my problem. Align <div> elements side by side

Here is my internal CSS.

<style type="text/css">
/* left div holding the image */
#left {
width:170px;
align:left;  }

/* right div to hold the text */
#right {
margin-left: 200px;
text-align:left; }
</style>

Here's the HTML

<div id="content">
<br/>
<br/>
<br/>
<blockquote>
<div id="right">Check back soon.  <a href="mailto:TwoWiredChicksJewelry@gmail.com?subject=AlertWhenPageComplete">Click here</a> to receive an email when the site becomes available.</div><div id="left"><img src="images/construction-clipart.jpg" border="1" alt="Page under construction" /></div>
</blockquote>
</div>

Can you help me figure out how to make these align? To view how it is rendering, please visit my student project site at http://www.student.nvcc.edu/home/ligomes/TwoWiredChicks/Browse.html.

Thanks!

Elmer · Answer 1 · 2013-08-08T05:53:14.577

0

Finally, I hope this helps now. All you have for the right css is:

#right {

    position: absolute;
    margin-left: 200px

}

edited Aug 08 '13 at 05:53

answered Aug 08 '13 at 05:24

Elmer

180
1
2
12

That didn't fix the problem. Any other suggestions? – Lisa Farmer Gomes Aug 08 '13 at 05:29
The length is included in the external CSS and both of these elements are included in an element within the external CSS. Would that be causing the problem? I wasn't sure if you can nest an internal CSS into an external CSS. – Lisa Farmer Gomes Aug 08 '13 at 05:37
Updated answer. Hope it helped. – Elmer Aug 08 '13 at 05:39
Or you could also try `margin-top: -40px` – Elmer Aug 08 '13 at 05:44
This was how I had it originally, but I tried it again and it doesn't seem to correct it. More thoughts? – Lisa Farmer Gomes Aug 08 '13 at 05:45
How about now? It seemed to wok on your website. – Elmer Aug 08 '13 at 05:53
What browser are you using? I have tried both Chrome and IE. It is still rendering the same way. – Lisa Farmer Gomes Aug 08 '13 at 06:35
That worked! Any thoughts on how I can align it in the middle of the image instead of the top? – Lisa Farmer Gomes Aug 08 '13 at 06:49
Change your `#right` css. `margin-top: 60px;` seems to do it. If this is what you are looking for, mark this answer as the final answer. – Elmer Aug 08 '13 at 17:21

Aligning div elements side-by-side

1 Answers1