0

I want to try achieve something like this image: enter image description here

So far my attempt is that I have a div for the left column (that contains the image), and a div for the right column which contains the heading and the paragraph stuff. Both of them are displayed as blocks, and floated left. The left column has a fixed with of 96px since the image will be that size. The right div is a percentage width which I eyeballed (65% worked okay).

However, I don't think this is the right way to approach this without it messing up later. Am I approaching this correctly? What is the proper way to do this kind of thing?

mosmo
  • 411
  • 1
  • 4
  • 10

4 Answers4

1

This is exactly why Flexbox was invented. Many many many examples exist, for exactly this question, even on SO.

Very very simple CSS:

.container {
    display: flex;
}
.container .image {
    flex: 0 0 96px;
}

Demo: http://jsfiddle.net/rudiedirkx/vmukbe9u/

Flexbox is sort-of complicated-ish, but very worth it.

Syntax explanation here.

Community
  • 1
  • 1
Rudie
  • 52,220
  • 42
  • 131
  • 173
  • I cannot believe no one else even thought of mentioning flexbox, and instantly fell to floats or tables. +1. – Madara's Ghost Nov 15 '15 at 07:52
  • @MadaraUchiha - why would you use flexbox with its dubious backward compatibility for this, when GCyrillus's float answer is simple and has worked since the early CSS-supporting browsers? – Alohci Nov 15 '15 at 10:23
  • @Alohci Because progress and modernization is more important than supporting legacy browsers. The sooner support drops, the better, and that can only happen when more and more users use modern features. That's why I support using flexbox over floats, and that's why I always use ES6 in my answers. Be modern, if enough sites break, people will not have no choice but to upgrade, which is basically what happened in the past years. – Madara's Ghost Nov 15 '15 at 10:25
0

If what you want is exactly like the attached image shows , then use display:table-cell for both , give one 100% percent width , and the other fixed width in pixels: CSS:

#parent
  {
    display:table;
}
#left-div
    {
       display:table-cell;
       width:96px;
       height:96px;
    }
 #right-div
    {
       width:100%;
       display:table-cell;
       height: auto;
    }

HTML:

   <div id="parent">    
      <div id="left-div"></div>
      <div id="left-div"></>
    </div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
ProllyGeek
  • 15,517
  • 9
  • 53
  • 72
0

To position two div's next to each other with some super basic CSS you can float one div to the left and one to the right, that will get them on the same line next to each other. Then you can specify the width of each, basically you need to start with 100% (the full width of the screen) and make one a portion and the other a portion so that when you add them together they add up to 100%.

HTML - 

<div class="left">This is the div on the left</div>
<div class="right">This is the div on the right</div>

CSS - 

.left{
    float:left;
    width:30%;
}

.right{
    float:right;
    width:70%;
}

Then to make it responsive you can make a media query (basically just sets specific styles for specific screen widths) that only affects screens that are up to and including 1024 pixels wide (tablet sized). I just arbitrarily choose 1024 pixels, you can make more specific ones or not include them all together, totally up to you. I have included this media query that just removes the float so that the div's will be arranged one on top of the other and then made their width 100%, so they both take up the full width of the screen

@media(max-width:1024px){
    .left{
        float:none;
        width:100%;
    }

    .right{
        float:none;
        width:100%;
    }
}

This kind of stuff can also be achieved really easily using a responsive framework like Bootstrap, with Bootstrap you would give your div's specific classes, those classes specify what the width of the div and arrangement should be on different screen sizes. you can include Bootstrap in your project then achieve this same affect like this

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">this div is on the left on big screens</div>
    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">this div is on the right on big screens</div>
</div>

Bootstrap is based on a 12 column grid, 12 columns = 100% of the screen width. That is why I used a width of 4 for the smaller left hand div and a width of 8 for the larger right hand. You can adjust these widths as needed. Hope this all helps.

Jesse Cohn
  • 1
  • 1
0

if you want to use float, make only the image float

body,
img,
.box {
  border: solid;
  margin: 1em;
}
img {
  float: left;
}
.box {
  overflow: hidden;
}
<img src='http://lorempixel.com/150/150' />
<div class="box">
  <h1>HTML Ipsum Presents</h1>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

  <h2>Header Level 2</h2>

  <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>

  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
      elit sit amet quam. Vivamus pretium ornare est.</p>
  </blockquote>
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129