2

I'm not sure what I'm doing wrong here. I'm trying to force an image to be in the same line as a few columns of text, but it keeps shifting down like in this image: https://i.stack.imgur.com/lgWN8.jpg. The left image is what I want it to look like, but I get the right image.

I've already tried display:inline and floats, but neither works. This is my code:

.page {
margin-top:50px;
padding-left:50px;
padding-right:50px;
position:relative;
width:1000px;
height:450px;
}
.leftcolumn {
margin-top:50px;
margin-left:0px;
width: 250px;
}
.middlecolumn {
margin-left:300px;
margin-right:320px;
margin-top:50px;
float:left;
display:inline;
}
.verticalimage {
margin-right:0;
margin-top:0;
float:right;
display:inline;
vertical-align:middle;
}

<div class="page">
    <div class="leftcolumn">text <br> text <br> text</div>

    <div class="middlecolumn">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lorem velit. Nullam et metus eget nunc egestas laoreet et quis ligula. Vivamus lobortis sodales pulvinar. Nunc malesuada pretium ornare. Aliquam ut erat at magna pellentesque elementum. Fusce facilisis lorem et tortor euismod bibendum.</div>

    <img class="rightverticalimage" src="picture1.png"/>

</div>

Thanks.

Windbrand
  • 555
  • 4
  • 13
  • 21
  • Image has the display semantic of "display:inline-block"; you might try setting that property for the other text divs to make them equivalent. (See http://stackoverflow.com/questions/2402761/img-elements-block-level-element-or-inline-element) – Don Day Mar 06 '13 at 04:41
  • I dont think you need to display it as in inline block for the image, unless your using it as some type of link. – Robert Mailloux Mar 06 '13 at 04:47

2 Answers2

0

I tried this for ya. I took stuff out just so you understand the code. You can edit at your liking.

CSS

.page {
margin:5%;
width:100%;
height:450px;
}


div {
width:25%;
margin-left:3%;
float:left;
background-color:red;}

I made the BG red just so you can see where the div starts and stops

HTML

<div class="page">

    <div>text <br /> text <br /> text</div>

    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lorem velit. Nullam 

et metus eget nunc egestas laoreet et quis ligula. Vivamus lobortis sodales pulvinar. Nunc 

malesuada pretium ornare. Aliquam ut erat at magna pellentesque elementum. Fusce facilisis lorem 

et tortor euismod bibendum.</div>

<div>
    <img class="rightverticalimage" src="picture1.png"/>
</div>

</div>

Put the IMG in a div to help control it better.

Id also download FIREBUG onto Firefox cuz it helps with that stuff.

Robert Mailloux
  • 397
  • 4
  • 14
  • Remove the background-color after you try it. Like I sadi, youll have to tweak the measurements. When I layout divs, I usually use EMs, but for the sake of this I used %. EMS are nice because when your browser resizes, all the text resizes with it. EMS just take a lil more finess is all. – Robert Mailloux Mar 06 '13 at 04:49
0

You're mixing a couple of different methods here. Firstly as you may have noticed with your leftcolumn, if you make a div display:inline it won't hold its width. This is because in order to render with a width or margins, an element must be block level (which divs are by default). Additionally, setting the left margin on the middlecolumn with the left div already there will set its left hand side to be at 550px within the container (250 for the leftcolumn and an additional 300 for left margin), margins and widths are cumulative.

So then two ways to do this are (I've left out your extra margins for brevity):

  1. Using floats:

    .leftcolumn
{
    width: 250px;
    float:left;
}

.middlecolumn
{
    width: 250px;
    float:left;
}

    This will leave the two divs as block elements allowing them to behave as they normally would, setting the width on the two columns and continue the flow around them, since the image is an inline element, it will continue to flow as well. What this approach does do however is leave the container only as high as the image element since a floated element doesn't sit in the page flow in the same way.

  2. Using display: inline-block

    .leftcolumn
{
    display: inline-block;
    width: 250px;
}

.middlecolumn
{
    display: inline-block;
    width: 250px;
}

    This will set the divs as inline-block allowing you to set a width on them, but rendering them as an inline element. The benefit of this is that the .page element will get the height of the divs automatically. It does, however break in ie7 since that doesn't render inline-block elements correctly.

I've intentionally left adding the width onto the image element since it will be the same across both approaches (just set display:block and float it, or set display: inline-block)

Owen
  • 491
  • 4
  • 8