DIV element becomes invisible

Question

I want to achieve the following layout, with the following background colors:

First row (red): 'text 1' next to the image, 'text 2' floating right
Second row (green): 'text 3' floats left [70% of screen], 'text 4' floats right [30% of screen]

And here is my code trying to do so:

<html>
<head>
    <title>VVNET</title>
    <style type="text/css">
    </style>
</head>
<body>
    <div style="background: red;">
        <img style="width: 55px; height: 55px; display: inline-block; float: left; " src="logo.png">
        <div style="display: inline-block; float: left;">
            text 1
        </div>
        <div style="display: inline-block; float: right; ">
            text 2
        </div>
    </div>
    <div style="background: green;">
        <div style="display: inline-block; float: left; width: 68%">
            text 3
        </div>
        <div style="display: inline-block; float: left; width: 28%">
            text 4
        </div>
    </div>
</body>
</html>

For some reason first of all, both the rows (divs) have 0 height, thus they have no color. Second of all, somehow all the rows are intertwined and 'text 3' floats right next to 'text 1'
This is my output:

inline-block with float is useless .. you need to either use float or inline-block — Temani Afif, Jan 12 '19 at 11:01
Yeah , So use display:flex, That will do what you are trying to do. — Thanveer Shah, Jan 12 '19 at 11:04
Can you please point where exactly to add display: flex and which part to remove? — Zafir Stojanovski, Jan 12 '19 at 11:05

DIV element becomes invisible

0 Answers0