CODEWITHSUNDEEP
htmlcssimageinline
wiwo
wiwo

Reputation: 883

How to set <div> s inline: text, img, text, text

At first I have to that I read a lot of tutorials and still I don't know what am I doing wrong...

I would like to use 4 divs inline. In those divs I would like to put: text, image, text, text. And I would like the middle text to set automatically to the maximum width.

I wrote a simple code, just to show my problem:

<div>
    <div style="float: right; width: 100px; background-color: red">right</div>
    <div style="margin-right: 100px; background-color: blue">
        <div style="width: 100px; background-color: green">left</div>
        <div style="width: 100px; margin-left: 100px; background-color: pink">
            <img src="../zdjecia_przedmiotow/1_small.jpg" />

        </div>
        <div style="margin-left: 200px; background-color: green">center</div>
    </div>
</div>

And it looks like this: enter image description here

I would like to do it using divs! what am I missing?

Upvotes: 1

Views: 62

Answers (2)

ptrk
ptrk

Reputation: 1840

I simplified the HTML structure a bit and used floats. With the CSS left inline:

<div style="background-color:blue;">
    <div style="width: 100px; background-color: green; float:left;">left</div>
    <img src="../zdjecia_przedmiotow/1_small.jpg" style="width: 100px; background-color: pink; float:left;" />
    <div style="background-color: green; width:calc(100% - 300px); float:left;">center</div>
    <div style="width: 100px; background-color: red; float:right;">right</div>
</div>

After CSS is out:

.box{background-color:blue}
.left{width: 100px; background-color: green; float:left;}
.fill{background-color: pink; width:calc(100% - 300px);}
.right{width: 100px; background-color: red; float:right;}

<div class="box">
    <div class="left">left</div>
    <img class="left" src="../zdjecia_przedmiotow/1_small.jpg"/>
    <div class="left fill">center</div>
    <div style="right">right</div>
</div>

Fiddle

Upvotes: 1

jmore009
jmore009

Reputation: 12933

First you need to float those divs inside so they align next to each other. Then you can use calc() to make the last container take the rest of the width;

FLOAT EXAMPLE

OR

You can use display: table on the parent and set the children to display: table-cell like so:

TABLE EXAMPLE

Also I restructured this a bit since there was some unnecessary elements/styles in there:

HTML

<div class="wrapper">
   <div class="box box1">left</div>
   <div class="box box2">
      <img src="../zdjecia_przedmiotow/1_small.jpg" />
   </div>
   <div class="box box3">center</div>
   <div class="box box4">right</div>
</div>

CSS

.wrapper{
    overflow:hidden;
    width:100%;
}

.box{
    float: left;
} 

.box1{
  width: 100px; 
  background-color: green;
}

.box2{
    width: 100px; 
    background-color: pink;
}

.box3{
    background-color: green;
    width:calc(100% - 300px);
}

.box4{
    width:100px;
    background-color: blue;
}

CLEANER FIDDLE

Upvotes: 1

Related Questions