CODEWITHSUNDEEP
htmlcsslayoutcss-position
MarcelloHutchinson-Trujillo
MarcelloHutchinson-Trujillo

Reputation: 1

Having an image and paragraph inline

I want to position a paragraph and an image next to each other and have them both centered. Here is an example of what I'm trying to do. Scroll down a bit to see.

http://shibori-demo.squarespace.com/how-shibori-works-shibori/

I can get this to work but it all is squished up to the left side of the viewport. What's the best way to get this effect?

Upvotes: 0

Views: 2014

Answers (2)

byrass
byrass

Reputation: 360

The example you gave used flex properties. In a nutshell, you can accomplish your task by putting your elements inside a div container with display:flex.

<div class="container">
  <p class="inner">text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. 
  </p>
  <img src="http://placehold.it/200x350"/>
</div>

The css is simple:

 .container {
      display: flex;
    }

Here's a complete guide to flex and the doc to the display property.

After that, change the width to whatever you need and center it.

.container {
  display: flex;
  width: 80%;
  margin: 0 auto;
}

Upvotes: 2

cssyphus
cssyphus

Reputation: 40078

DIVs. Lots of divs.

First, and outer div that is width:100% and is text-align:center

Then, a wrapper div to put the two items in. It should be styled overflow:hidden so that the inner divs (styled using float) have height.

Finally, a div around each item to give them their own box, and style each as float:left

div {position:relative;box-sizing:border-box;}
.wrapper{width:100%;border:1px solid orange;}
  .innerwrap{width:100%;overflow:hidden;}
    .boxes{float:left;width:50%;padding:10px;}
    .leftBox {}
    .rightBox{}
<div class="wrapper">
  <div class="innerwrap">
    <div class="boxes leftBox">
      <img src="http://placekitten.com/230/300" />
    </div>
    <div class="boxes rightBox">
      <p>Ad vidit contentiones consequuntur sea, quod eripuit assentior an nec. Cu errem eruditi est, quando everti duo eu. Eum consul noster vocent ex, at ius viris aeterno omittam. His nonumy lobortis convenire ei. Sea eu justo choro qualisque. Dolore pertinax accommodare quo et, per ad debet delenit splendide. Voluptua sapientem id eos.</p>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions