CODEWITHSUNDEEP
htmlcss
Marco Dinatsoli
Marco Dinatsoli

Reputation: 10570

css image becomes over the text

you may think that this question is duplicated, but please check the jsffiddle first to be sure that it is not

Normally, I just float the image right or left and text becomes floated left of right to it, that works perfectly when I have just on image. but this case I have four images at the corners of a div. I don't want the text to be left and right of images, but I do want the text to not be hidden.

I mean the text starts bellow the image in the current case, and that what I want to fix.

What I have tried

I have tried to put float left and right on the images and give the .box2 class a clear:both

JSFIDDLe http://jsfiddle.net/EL5n9/

Upvotes: 0

Views: 103

Answers (5)

MMachinegun
MMachinegun

Reputation: 3074

based on @Alek his answer and your comment about not wanting to use br,span or div I came up with two suggestions:

The first one you float the images at the bottom and float the parent .box:

http://jsfiddle.net/EL5n9/19/

or

Second one is almost the same, except you don't float the parent .box, but use a clearfix. Personally I don't like clearfixes and avoid using them whenever possible, but just in case you can't float the parent you can do this:

http://jsfiddle.net/EL5n9/18/

Upvotes: 2

imbondbaby
imbondbaby

Reputation: 6411

Change to this:

.box {
    float: left;
    width: 600px;
    border: 2px solid black;
}
.img1 {
    float:left;
    top: 0px;
    left: 0px;
    width:50px;
    height: 50px;
}
.img2 {
    float:right;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 50px;
}
.img3 {
    float:left;
    clear:both;
    bottom: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
}
.img4 {
    float:right;
    bottom: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
}

Demo

Upvotes: 2

Alex Char
Alex Char

Reputation: 33218

css

.box {
    max-width:600px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    border: 2px solid black;
}
.img1 {
    position: relative;
    top: 0px;
    left: 0px;
    width:50px;
    height: 50px;
    float:left;
}
.img2 {
    position: relative;;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 50px;
    float:right;
}
.img3 {
    position: relative;
    bottom: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
    float:left;
}
.img4 {
    position: relative;;
    bottom: 0px;
    right: 0px;
    width: 50px;
    height: 50px;
    float:right;
}

fiddle

Upvotes: 2

user2535654
user2535654

Reputation:

It's because you set your image position to absolute, so that the image overlap the text.

You can simply move the text div bellow the imgae, here is the demo:

UPDATE FIDDLE

  <div class="box">

    <img class="img1" src="http://s10.postimg.org/7r9itbhs9/default_image.jpg" alt="default image">
    <img class="img2" src="http://s10.postimg.org/7r9itbhs9/default_image.jpg" alt="default image">
    <img class="img3" src="http://s10.postimg.org/7r9itbhs9/default_image.jpg" alt="default image">
    <img class="img4" src="http://s10.postimg.org/7r9itbhs9/default_image.jpg" alt="default image">
</div>
                <div class="box2">this is the text
    </div>

Upvotes: 0

Narxx
Narxx

Reputation: 8299

Since all your images are absolute positioned, you could give the box2 div a position: relative and then just give box2 also z-index: 1.

In short: add:

z-index:1;
position: relative;

to box2.

Explanation: When elements aren't positioned statically (the default for all DOM elements is position: static) you can play around with their z-index. This means the 'level' or 'layer' (as in Photoshop layer) this element is. The default value of z-index is 0. So, putting the text box in a higher 'layer', makes it render above the other layers (the images, which are by default set to z-index: 0).

Hope this helps :)

Upvotes: 2

Related Questions