CODEWITHSUNDEEP
htmlcss
Levan Tsivadze
Levan Tsivadze

Reputation: 83

Text left and image right

I'm trying to make text left and image right in the div. I found many examples in Stackoverflow where image is left and text right, then i tried to switch them but can't make it work. I found that on stackoverflow but doesn't make sense for me.

I've tried this JSFIDDLE but you'll see that it wont works.

.main-topic {
    border: 2px solid green;
    width: 1541px;
    margin: 0 auto;
    clear: both;
}

.left-text{
    vertical-align:middle;
}

.right-picture{
    float: right;
}

.right-picture > img{
    display: block;
}

.clear{
    clear: both;
}

My goal is this (sorry can't post image i haven't enough reputation). I want that text be left side on the bordered div and picture in the right side

Upvotes: 7

Views: 31922

Answers (4)

Asons
Asons

Reputation: 87191

I updated your fiddle, removed some height/width settings and adjusted the following CSS rules, so now it looks good

.main-topic {
    display: table;
    border: 2px solid green;
    margin: 0 auto;
}

.left-text{
    display: table-cell;
    vertical-align:middle;
}

.right-picture{
    display: table-cell;
}

Upvotes: 0

ketan
ketan

Reputation: 19341

Just add display: flex; to .main-topic will do the trick.

And remove following css. There is no need of it now.

.right-picture{
    float: right;
}

Working Fiddle

Edit:

If don't required static width and height then, remove static height from section and static width from .main-topic will make result better.

Which is width: 1541px; from .main-topic And height: 500px; from section

Updated Fiddle

Upvotes: 5

Joey M-H
Joey M-H

Reputation: 773

How about this: http://jsbin.com/yenuxajode

Just float the text div left with width 50% (or whatever you want) and float the image div right with the remaining width. Make the img have max-width:100%; to keep it all on the page.

Upvotes: 0

silviagreen
silviagreen

Reputation: 1729

Remove float:right from img and put float: left in .left-text

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

ul.topnav {
	list-style-type: none;
	/*position: fixed; */
	overflow: hidden;
	margin: 0;
	padding: 0 0 0 400px;
	background-color: #110E0C;
   /*width: 100%;
   top: 0; */
}

ul.topnav li {
	float: left;
}

ul.topnav li a {
	display: block;
	color: white;
	text-align: center;
	text-decoration: none;
	padding: 14px 30px;
	text-transform: uppercase;
	/*background-color: #3F4345;*/
}

ul.topnav li a:hover {
	background-color: #C8D0D7; 
	color: #D8610C;
	border-bottom: 1px solid #D8610C;
}

ul.topnav li a.active {
	background-color: #C8D0D7;
	color: #D8610C;
	border-bottom: 1px solid #D8610C;
}


header {
	width: 100%;
	padding: 2px;
	color:black;
	background-color: #C8D0D7;
	text-align: center;
	overflow: hidden;
}

header img {
	
	height: 150px;
	width: 150px;
	margin-left: 900px; 
	float:left;
	
}
header p {
	padding: 40px;
}

section {
	background-color: #333333;
	height: 500px;
}

section img {
	border: 1px solid white;
	height: 400px;
	width: 500px;
}

section h3 {
	color: white;
}

section p {
	color: white;
	height: 170px;
	width: 600px;
	padding: 0;
	margin: 0;
	line-height: 20px;
	vertical-align: top;
}

.main-topic {
	border: 2px solid green;
	width: 1541px;
	margin: 0 auto;
	clear: both;
}

.left-text{
	vertical-align:middle;
  float:left;
}

.right-picture{

}

.right-picture > img{
	display: block;
}

.clear{
	clear: both;
}
	<section>
		<div class="main-topic">
			<div class="left-text">
				<h3>Deadpool Fans Petition 'SNL' for Superhero to Host</h3>
				<p>
					Deadpool fans want its superhero to host Saturday Night Live — Deadpool, that is, not Ryan Reynolds. Fans of the Merc With a Mouth, who led the Marvel film to a history-making debut at the box office, have launched a Change.org petition calling for the antihero to host an upcoming episode of the NBC sketch comedy show. "We've all seen the trailers, the magazine covers, the viral videos, and the billboards by now, so what's left for Deadpool (Ryan Reynolds) to do?" creator Andrew Stege asks in the petition, which is directed to SNL, creator Lorne Michaels, parent.
				</p>
			</div>
			<div class="right-picture">
				<img src="http://cdn3.whatculture.com/wp-content/uploads/2015/10/f5S3dvUb.jpg">
			</div>
			<div class="clear"></div>
		<div>
	</section>

Upvotes: 1

Related Questions