how to position a div next to and above itself?

Question

I'm having trouble placing a div in the right place. Float added but still crashes on the page.I want to get the effect like in the picture:

enter image description here

my css code:

*{
    font-family: Helvetica;
}

#div1, #div5{
    background: #00838F;
    color: white;
    padding: 5px;
    font-size: 130%;
    float:center
}

#div5{
    vertical-align: bottom;
}

#div2, #div3{
    background: #EFEFEF;
    width: 55%;
    float: left;
}

#div2{
    high: 150px;
}

#div3{
    high: 300px;
}

#div4{
    background: #4FB3BF;
    width: 45%;
    high: 450px;
    text-align: center;
    float:right;
}

img{
    box-shadow: 10px 10px 7px DimGray;
    margin: 20px;
}

table, tr, td{
    border-style: solid;
    border-color: #4FB3BF;
    border-width:1px;
    border-collapse: collapse;
}

table{
    margin: auto;
    width: 80%;
}

tr,td{
    padding:4px
}

td:hover{
background-color: #4FB3BF;
}

the arrangement should be in html but when I tried it, nothing happened at all

html code:


    <body>
        <div id="div1">
            <h1>title</h1>
        </div>
        <div id="div2">
            <h3>small text</h3>
            <ol>
                <li>skrypt</li>
            </ol>
        </section>
        <section id="div3">
            <h3>text</h3>
            <table>
                <tr>
                    <th>1</th> <th>2</th> <th>3</th>
                </tr>
                <tr>
                    <td>...</td> <td>...</td> <td>...</td>
                </tr>
            </table>
        <div>
        <div id="div4">
            <p>
                <img src="ryba1.jpg" alt="Sum">
            </p>
                <p><a href="data.txt">information</a>
            </p>
        </div>
        <div id="div5">
            <p>Autor</p>
        </div>
    </body>
</html>

I know this is quite an outdated method but I need to use it.

initially, I wanted to do the tidying up in html using float but nothing changed, after using it in css they moved slightly but it's still not what I expect

CSS without the HTML it is supposed to apply to, tells us rather little. Please always present a proper [mre] when you ask this kind of question. — CBroe, Jun 09 '23 at 12:51
`float:center` - that's not a thing. And floating in general is quite an outdated layouting method - you should really rather be looking into flexbox and/or grid these days. — CBroe, Jun 09 '23 at 12:52
It sounds like you're over-complicating the layout. In the picture I see three divs, vertically stacked. The center of which contains two divs, horizontally aligned. The left of which contains two divs, vertically stacked. — David, Jun 09 '23 at 12:58

score -1 · Answer 1 · answered Jun 09 '23 at 13:01

-1

Inside " #div1, #div5{ " I would reconsider "float:center" or suggest finding a different option then using that.

answered Jun 09 '23 at 13:01

jjaster

1
2

score -1 · Answer 2 · answered Jun 09 '23 at 13:02

as saying CBroe, grid would lot better to structure your page. It's done for that...

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

#grid {
  display: grid;
  grid-template-rows: 80px 120px 1fr 70px;
  grid-template-columns: 20% 1fr;
  gap: 10px;
  width: 100vw;
  height: 100vh;
}

#div1 {
  grid-area: 1 / 1 / 2 / 4;
  background-color: rgba(144, 135, 119, 0.5);
}

#div2 {
  grid-area: 3 / 1 / 4 / 2;
  background-color: rgba(40, 50, 160, 0.5);
}

#div3 {
  grid-area: 2 / 2 / 4 / 4;
  background-color: rgba(49, 191, 180, 0.5);
}

#div4 {
  grid-area: 2 / 1 / 3 / 2;
  background-color: rgba(221, 193, 101, 0.5);
}

#div5 {
  grid-area: 4 / 1 / 5 / 4;
  background-color: rgba(216, 190, 9, 0.5);
}

<div id="grid">
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>
  <div id="div4">div4</div>
  <div id="div5">div5</div>
</div>

how to position a div next to and above itself?

2 Answers2