Text on the left and right of the image

Question

I try to make the text on the left and the image right in the div. I found many examples in Stackoverflow, where the image remains and the text is on the right, then I tried to switch them, but I can not get it to work. I have found https://stackoverflow.com/a/4129609/2163393/ but it makes no sense to me.

I tried this JSFIDDLE , but you will see that it does not work.

.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, I can’t post the image, I don’t have enough reputation). I want the text to be on the left of the border div and the picture on the right

Answer 1

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

And remove the following css. Now it is not necessary.

 .right-picture{ float: right; } 

Working script

Edit:

If static width and height are not required, remove the static height from section , and the static width from .main-topic will make the result better.

What width: 1541px; from .main-topic AND height: 500px; from section

Updated Fiddle

Answer 2

Remove float: directly 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 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> 

Answer 3

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

Just float the div text on the left with a width of 50% (or whatever you want) and float the div image on the right with the remaining width. Make img max-width: 100%; to save everything on the page.

Answer 4

Please try this, I think it will be work

 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: 1102px; 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 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> 

Answer 5

I updated your fiddle , removed some height and width settings and adjusted the following CSS rules so that 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; }