Welcome to WebmasterWorld Guest from 54.224.50.28

Forum Moderators: not2easy

Message Too Old, No Replies

Text and image side by side

     
7:27 pm on Sep 24, 2013 (gmt 0)

New User

5+ Year Member

joined:June 22, 2012
posts: 29
votes: 0


I'm trying to get the text with the video link on the left side and the image to the right side. This almost works but the text is below the image and not aligned center to it.
Please assist.....

HTML


<div class="belowheaderwrap">

<div class="belowheaderelement">Explore the benefits of using <a style="color:black; font-size:22px; font-weight:bold;" class="fancybox-media" href="#">watch our video</a>
</div>
<img class="belowheaderelement" src="images/reportbutton.png" />
</div>


CSS

.belowheaderwrap {

width:700px;
display:table;

}
.belowheaderelement {
text-align:left;
width:50%;
display:table-cell;
}

7:44 pm on Sept 24, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:June 6, 2012
posts: 104
votes: 0


This should work:

<div class="belowheaderwrap">

<div class="content-left">
<p>Explore the benefits of using</p>
<a style="color:black; font-size:22px; font-weight:bold;" class="fancybox-media" href="#">watch our video</a>
</div>

<div class="content-right">
<img class="belowheaderelement" src="images/reportbutton.png" />
</div>
</div>

.belowheaderwrap {
width:700px;
overflow: auto;
}


.content-right {
float: left;
width: 50%;
background: yellow;
}

.content-left {
float: left;
width: 50%;
text-align: center;
background: red;
}
8:11 pm on Sept 24, 2013 (gmt 0)

New User

5+ Year Member

joined:June 22, 2012
posts: 29
votes: 0


thanks, that worked but in IE 10 there are two scroll bars present on the right side of the image.
8:13 pm on Sept 24, 2013 (gmt 0)

New User

5+ Year Member

joined:June 22, 2012
posts: 29
votes: 0


overflow:none removed the ie 10 scrollbars
8:24 pm on Sept 24, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:June 6, 2012
posts: 104
votes: 0


"overflow: hidden" would also work on the container or parent div but I'm not sure what the size of the image is and it may produce undesirable results. If you used overflow: hidden, which would be typical in this case, you might have to mess with the div sizes of content-left and content-right
8:37 pm on Sept 24, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:June 6, 2012
posts: 104
votes: 0


Quick note: using "overflow: none" is actually an invalid property and really isn't working as a container. You should probably add "overflow: hidden" and adjust the size of the content-right and content-left divs.

As an example if you added a div under "belowheaderwrap" it would appear behind it because "belowheaderwrap" has no height since it isn't containing anything.
9:40 pm on Sept 24, 2013 (gmt 0)

New User

5+ Year Member

joined:June 22, 2012
posts: 29
votes: 0


got it, thank you...
7:05 pm on Sept 25, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 21, 2002
posts:753
votes: 10


Using a P tag vs the DIV for your text may achieve the intended result with less CSS.

YMMV
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members