css divs in div overlapping in wrong way

Question

this is a responsive design

https://fiddle.jshell.net/f56fpzn9

i did what i want for mobile view (adjust to see), however in the wide view
the textTitle is overlapping with the textBox
and the contentBox didn't scratch to fit the size of content

probably the problem of position!?
i've tried for different settings, still can't get what i want
perhaps it's off-standard, suggest a proper way if appropriate

please help :(

OrderAndChaos · Accepted Answer · 2016-05-08T11:23:58.010

1

You had position absolute on a couple of divs that need to be overridden, I have used position: static though position: initial may have worked too.

You also needed to override the min-height of one element, I used min-height: auto

The structure of the HTML needed to be tweaked slightly, the image box is now it's own container which helps to push the rest of the content underneath it.

https://fiddle.jshell.net/f56fpzn9/2/

Have a read through the code and let me know if there is something I missed.

edited May 08 '16 at 11:23

answered May 08 '16 at 10:30

OrderAndChaos

3,547
2
30
57

i actually want the title to be displayed under the photo in the wide view – Gary Chan May 08 '16 at 11:14
No problem, glad to help. – OrderAndChaos May 08 '16 at 11:39

css divs in div overlapping in wrong way

1 Answers1