Welcome to WebmasterWorld Guest from 54.242.105.196

Forum Moderators: not2easy

Text and image side by side

   
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;
}

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;
}
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.
8:13 pm on Sep 24, 2013 (gmt 0)



overflow:none removed the ie 10 scrollbars
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
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.
9:40 pm on Sep 24, 2013 (gmt 0)



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

WebmasterWorld Senior Member 10+ Year Member



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

YMMV
 

Featured Threads

Hot Threads This Week

Hot Threads This Month