homepage Welcome to WebmasterWorld Guest from 54.205.160.82
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Text and image side by side
jp12




msg:4612393
 7:27 pm on Sep 24, 2013 (gmt 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;
}


 

brandozz




msg:4612396
 7:44 pm on Sep 24, 2013 (gmt 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;
}

jp12




msg:4612405
 8:11 pm on Sep 24, 2013 (gmt 0)

thanks, that worked but in IE 10 there are two scroll bars present on the right side of the image.

jp12




msg:4612406
 8:13 pm on Sep 24, 2013 (gmt 0)

overflow:none removed the ie 10 scrollbars

brandozz




msg:4612413
 8:24 pm on Sep 24, 2013 (gmt 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

brandozz




msg:4612419
 8:37 pm on Sep 24, 2013 (gmt 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.

jp12




msg:4612439
 9:40 pm on Sep 24, 2013 (gmt 0)

got it, thank you...

Hoople




msg:4612667
 7:05 pm on Sep 25, 2013 (gmt 0)

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

YMMV

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved