Why is my image not being placed next to my text?

Question

I am trying to place my image next to text but it doesn't seem to be working.

.w3-container:after,
.w3-container:before,
.w3-panel:after,
.w3-panel:before,
.w3-row:after,
.w3-row:before,
.w3-row-padding:after,
.w3-row-padding:before,
.w3-cell-row:before,
.w3-cell-row:after,
.w3-clear:after,
.w3-clear:before,
.w3-bar:before,
.w3-bar:after {
  content: "";
  display: table;
  clear: both
}

.w3-col,
.w3-half,
.w3-third,
.w3-twothird,
.w3-threequarter,
.w3-quarter {
  float: left;
  width: 100%
}

.w3-container,
.w3-panel {
  padding: 0.01em 16px
}

.w3-center .w3-bar {
  display: inline-block;
  width: auto
}

.w3-bar-block.w3-center .w3-bar-item {
  text-align: center
}

.w3-row-padding,
.w3-row-padding>.w3-half,
.w3-row-padding>.w3-third,
.w3-row-padding>.w3-twothird,
.w3-row-padding>.w3-threequarter,
.w3-row-padding>.w3-quarter,
.w3-row-padding>.w3-col {
  padding: 0 8px
}

.w3-content,
.w3-auto {
  margin-left: auto;
  margin-right: auto
}

.w3-content {
  max-width: 980px
}

.w3-center {
  text-align: center!important
}

<div class="w3-content">
  <div class="w3-twothird">
    <h1>Hello!</h1>
    <h5 class="w3-padding-32" style="font-size:15px">Here would be some information to accompany the image.</h5>

    <p class="w3-text-grey">Some p text here.</p>
  </div>

  <div class="w3-third w3-center">
    <img src="https://as1.ftcdn.net/jpg/02/44/83/32/500_F_244833214_bBmRijbyEmtKrm7Q5zdcMc4ks3tpTmVu.jpg" style="max-height:200px; margin:150px 0px 0px 25px;border-radius: 15px; ">
  </div>
</div>

Ideally I'd like the text to take up about 70% of the div, and the image the remaining 30%, but i'll settle for just having text and image next to each other, I am not concerned about responsive design right now.

Answer 1

Because these classes make your div 100% width.

.w3-col,
.w3-half,
.w3-third,
.w3-twothird,
.w3-threequarter,
.w3-quarter {
  float: left;
  width: 100%
}

So you will need to make your div 2/3 and 1/3 of 100% as your wish.

.w3-twothird {
  width: 66.66%
}
.w3-athird {
  width: 33.33%
}

There are many way modern way to do it thing easier, you can check it with these keyword: "flex layout css" or "grid layout css".

Or you can reference here - https://flexboxfroggy.com/ for flex layout and grid layout here - https://cssgridgarden.com/

Good luck on the journey.

Answer 2

OK here is actual problem statement: Divs are covering full width of the container,and that is due to width being 100% in css. So does not matter whether its half full quarter they all get applied as 100%;

.w3-quarter {
  float: left;
  width: 100%
}

See for your self! I have only added background colour to the first div

.w3-container:after,
.w3-container:before,
.w3-panel:after,
.w3-panel:before,
.w3-row:after,
.w3-row:before,
.w3-row-padding:after,
.w3-row-padding:before,
.w3-cell-row:before,
.w3-cell-row:after,
.w3-clear:after,
.w3-clear:before,
.w3-bar:before,
.w3-bar:after {
  content: "";
  display: table;
  clear: both
}

.w3-col,
.w3-half,
.w3-third,
.w3-twothird,
.w3-threequarter,
.w3-quarter {
  float: left;
  width: 100%
}

.w3-container,
.w3-panel {
  padding: 0.01em 16px
}

.w3-center .w3-bar {
  display: inline-block;
  width: auto
}

.w3-bar-block.w3-center .w3-bar-item {
  text-align: center
}

.w3-row-padding,
.w3-row-padding>.w3-half,
.w3-row-padding>.w3-third,
.w3-row-padding>.w3-twothird,
.w3-row-padding>.w3-threequarter,
.w3-row-padding>.w3-quarter,
.w3-row-padding>.w3-col {
  padding: 0 8px
}

.w3-content,
.w3-auto {
  margin-left: auto;
  margin-right: auto
}

.w3-content {
  max-width: 980px
}

.w3-center {
  text-align: center!important
}

<div class="w3-content">
    <div class="w3-twothird" style="background-color:red;">
      <h1>Hello!</h1>
      <h5 class="w3-padding-32" style="font-size:15px">Here would be some information to accompany the image.</h5>

      <p class="w3-text-grey">Some p text here.</p>
    </div>

    <div class="w3-third w3-center">
      <img src="https://as1.ftcdn.net/jpg/02/44/83/32/500_F_244833214_bBmRijbyEmtKrm7Q5zdcMc4ks3tpTmVu.jpg" style="max-height:200px; margin:150px 0px 0px 25px;border-radius: 15px; ">
    </div>
  </div>

Now if I remove the width:100% from css lets you can measure the effect as shown below.

.w3-container:after,
.w3-container:before,
.w3-panel:after,
.w3-panel:before,
.w3-row:after,
.w3-row:before,
.w3-row-padding:after,
.w3-row-padding:before,
.w3-cell-row:before,
.w3-cell-row:after,
.w3-clear:after,
.w3-clear:before,
.w3-bar:before,
.w3-bar:after {
  content: "";
  display: table;
  clear: both
}

.w3-col,
.w3-half,
.w3-third,
.w3-twothird,
.w3-threequarter,
.w3-quarter {
  float: left;
 
}

.w3-container,
.w3-panel {
  padding: 0.01em 16px
}

.w3-center .w3-bar {
  display: inline-block;
  width: auto
}

.w3-bar-block.w3-center .w3-bar-item {
  text-align: center
}

.w3-row-padding,
.w3-row-padding>.w3-half,
.w3-row-padding>.w3-third,
.w3-row-padding>.w3-twothird,
.w3-row-padding>.w3-threequarter,
.w3-row-padding>.w3-quarter,
.w3-row-padding>.w3-col {
  padding: 0 8px
}

.w3-content,
.w3-auto {
  margin-left: auto;
  margin-right: auto
}

.w3-content {
  max-width: 980px
}

.w3-center {
  text-align: center!important
}

<div class="w3-content">
    <div class="w3-twothird" style="background-color:red;">
      <h1>Hello!</h1>
      <h5 class="w3-padding-32" style="font-size:15px">Here would be some information to accompany the image.</h5>

      <p class="w3-text-grey">Some p text here.</p>
    </div>

    <div class="w3-third w3-center">
      <img src="https://as1.ftcdn.net/jpg/02/44/83/32/500_F_244833214_bBmRijbyEmtKrm7Q5zdcMc4ks3tpTmVu.jpg" style="max-height:200px; margin:150px 0px 0px 25px;border-radius: 15px; ">
    </div>
  </div>

The image is not aligning next to the first div is because divs are more than 50% of the parent div. we need to assign more appropriate measure I have added w3-twothird and w3-third measures in css beside colouring divs.

.w3-container:after,
.w3-container:before,
.w3-panel:after,
.w3-panel:before,
.w3-row:after,
.w3-row:before,
.w3-row-padding:after,
.w3-row-padding:before,
.w3-cell-row:before,
.w3-cell-row:after,
.w3-clear:after,
.w3-clear:before,
.w3-bar:before,
.w3-bar:after {
  content: "";
  display: table;
  clear: both
}

.w3-col,
.w3-half,
.w3-third,
.w3-twothird,
.w3-threequarter,
.w3-quarter {
  float: left;
  
}
 .w3-third {
  
  width: 33.33%
}
 .w3-twothird {
  
  width: 66.66%
}


.w3-container,
.w3-panel {
  padding: 0.01em 16px
}

.w3-center .w3-bar {
  display: inline-block;
  width: auto
}

.w3-bar-block.w3-center .w3-bar-item {
  text-align: center
}

.w3-row-padding,
.w3-row-padding>.w3-half,
.w3-row-padding>.w3-third,
.w3-row-padding>.w3-twothird,
.w3-row-padding>.w3-threequarter,
.w3-row-padding>.w3-quarter,
.w3-row-padding>.w3-col {
  padding: 0 8px
}

.w3-content,
.w3-auto {
  margin-left: auto;
  margin-right: auto
}

.w3-content {
  max-width: 980px
}

.w3-center {
  text-align: center!important
}

<div class="w3-content">
    <div class="w3-twothird" style="background-color:red;">
      <h1>Hello!</h1>
      <h5 class="w3-padding-32" style="font-size:15px">Here would be some information to accompany the image.</h5>

      <p class="w3-text-grey">Some p text here.</p>
    </div>

    <div class="w3-third w3-center"  style="background-color:blue;   ">
      <img src="https://as1.ftcdn.net/jpg/02/44/83/32/500_F_244833214_bBmRijbyEmtKrm7Q5zdcMc4ks3tpTmVu.jpg" style="max-height:200px; margin:150px 0px 0px 25px;border-radius: 15px; ">
    </div>
  </div>

Above example will show you have another problem as already suggested by one of tha answer you have placed lot of margin space around image which is really overflowing the parent div image is in. You need to either adjust margin on image or add overflow property to div in which image is displayed.

.w3-container:after,
.w3-container:before,
.w3-panel:after,
.w3-panel:before,
.w3-row:after,
.w3-row:before,
.w3-row-padding:after,
.w3-row-padding:before,
.w3-cell-row:before,
.w3-cell-row:after,
.w3-clear:after,
.w3-clear:before,
.w3-bar:before,
.w3-bar:after {
  content: "";
  display: table;
  clear: both
}

.w3-col,
.w3-half,
.w3-third,
.w3-twothird,
.w3-threequarter,
.w3-quarter {
  float: left;
  
}
 .w3-third {
  
  width: 33.33%
}
 .w3-twothird {
  
  width: 66.66%
}


.w3-container,
.w3-panel {
  padding: 0.01em 16px
}

.w3-center .w3-bar {
  display: inline-block;
  width: auto
}

.w3-bar-block.w3-center .w3-bar-item {
  text-align: center
}

.w3-row-padding,
.w3-row-padding>.w3-half,
.w3-row-padding>.w3-third,
.w3-row-padding>.w3-twothird,
.w3-row-padding>.w3-threequarter,
.w3-row-padding>.w3-quarter,
.w3-row-padding>.w3-col {
  padding: 0 8px
}

.w3-content,
.w3-auto {
  margin-left: auto;
  margin-right: auto
}

.w3-content {
  max-width: 980px
}

.w3-center {
  text-align: center!important
}

<div class="w3-content">
    <div class="w3-twothird" style="background-color:red;">
      <h1>Hello!</h1>
      <h5 class="w3-padding-32" style="font-size:15px">Here would be some information to accompany the image.</h5>

      <p class="w3-text-grey">Some p text here.</p>
    </div>

    <div class="w3-third w3-center"  style="background-color:blue;     overflow: hidden;">
      <img src="https://as1.ftcdn.net/jpg/02/44/83/32/500_F_244833214_bBmRijbyEmtKrm7Q5zdcMc4ks3tpTmVu.jpg" style="max-height:200px; margin:150px 0px 0px 25px;border-radius: 15px; ">
    </div>
  </div>

W3-css is wonderful library and very useful light weight library but like many other libraries it is dependant on fundamentals of its own. width:100% and not having meassures for w3-twothird and w3-third broke those fundamental it depended on.

Answer 3

Using float for layout is outdated and complex. You should use more up-to-date tools such as flex.

Simplifying your CSS a lot, and using flex to get 2 thirds / 1 third when there's enough room (flex-basis will force that):

.w3-content {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
}

.w3-twothird {
  flex-grow: 2;
  /*width: 67%;*/
  flex-basis: 1px;
  border: 1px solid green;
}

.w3-third {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 1px;
  /*width: 33%;*/
  border: 1px solid blue;
}

.w3-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.w3-center img {
  display: block;
  max-width: 100%;
  border-radius: 15px;
}

  <div class="w3-content">
    <div class="w3-twothird">
      <h1>Hello!</h1>
      <h5 class="w3-padding-32" style="font-size:15px">Here would be some information to accompany the image.</h5>

      <p class="w3-text-grey">Some p text here.</p>
    </div>

    <div class="w3-third w3-center">
      <img src="https://as1.ftcdn.net/jpg/02/44/83/32/500_F_244833214_bBmRijbyEmtKrm7Q5zdcMc4ks3tpTmVu.jpg">
    </div>
  </div>

Also your image contains a lot of margin which makes it appear ill-centered.

Edit

I've just fixed some typo in CSS and removed the inline style for the image, making the output better

Answer 4

.container {
  display: flex;
}

img {
  margin: 6px;
  width:30%;
  height:auto;
  border-radius:10px;
}
.content{
width:70%;
}

<div class="container">
  <div class="content">
  <h5 class="w3-padding-32" style="font-size:15px">Here would be some information to accompany the image.</h5>

    <p class="w3-text-grey">Some p text here.</p></div>
     <img src="https://as1.ftcdn.net/jpg/02/44/83/32/500_F_244833214_bBmRijbyEmtKrm7Q5zdcMc4ks3tpTmVu.jpg"/>

Answer 5

One solution is to make the div elements inline-block. The float + width 100% you got going on above is also pushing everything to the next row I think

To prevent line breaks and spaces in the code from making this work a hack is to let the parents font-size be set to 0

.w3-col,
.w3-half,
.w3-third,
.w3-twothird,
.w3-threequarter,
.w3-quarter {display:inline-block;
}

.w3-content{font-size:0;}

.w3-twothird{width:70%;}
.w3-third{width:30%}

https://codepen.io/akmalmo/pen/vYgPMZB

Is something like this what you are after?

Answer 6

flexbox could help you place elements this way.

.w3-content {
     display: flex;
     justify-content: center;
     align-items: center;
}