Organising HTML causing spaces between elements

Question

I am currently having issues with laying out the code of my site and also having it how it should look

LAYOUT 1: How I want my site to look

![][1]
CODE FOR LAYOUT 1: Note it is hard to read

<!doctype HTML>
<html>
    <head>
        <link rel='stylesheet' href='stylesheet.css'>
    </head>
    <body>
        <div id="header"><div></div><div></div><div></div></div>
        <div id="main">
        </div>
        <div id="footer">
        </div>
    </body>
</html>

![][2]

CODE FOR LAYOUT 2: How I want code to look

<!doctype HTML>
<html>
    <head>
        <link rel='stylesheet' href='stylesheet.css'>
    </head>
    <body>
        <div id="header">
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
        </div>
        <div id="main">
        </div>
        <div id="footer">
        </div>
    </body>
</html>

![][3]

LAYOUT 2: How it actually looks

![][4]

CSS Code

*{
    padding: 0px;
    margin: 0px;
}

#header{
    width: 100%;
    height: 10vh;
}

#header > div{
    padding: 0px;
    position: static;
    display: inline-block;
}

#header > div:nth-child(1),
#header > div:nth-child(3){
    width: 25%;
    height: 100%;
    background: grey;
}

#header > div:nth-child(2){
    width: 50%;
    height: 100%;
    background:red;
}

#main{
    
}

#footer{
    
}

![][5]

Having the code look like the second example shown becomes quite stressful to organize once you load it up with information.

I was wondering if there is a CSS trick or something I am missing or if this is just how it needs to be done.

Any help would be much appreciated!

EDIT: Sorry for the cluttered mess, this is my first question and it is late at the moment haha
[1]: https://i.stack.imgur.com/dICLS.png [2]: https://i.stack.imgur.com/vXDrN.png [3]: https://i.stack.imgur.com/gzJe2.png [4]: https://i.stack.imgur.com/NMxJK.png [5]: https://i.stack.imgur.com/9iV15.png

Welcome to Stack Overflow! Please visit the [help], take the [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output using the `[<>]` snippet editor. POST CODE! Not PICTURES of code — mplungjan, Nov 10 '20 at 13:34
The arrangement of your div blocks in the markup should normally not affect the arrangement in the layout. Edit: Thanks for pasting as code — raujonas, Nov 10 '20 at 13:40
Can you have ```style="width: 25%;"``` for the first and the third ```div``` and ```style="width: 50%;"``` for the second ```div```? — Lajos Arpad, Nov 10 '20 at 13:40
@tschoninas Yeah that is what I thought as well, this is just an example script I wrote since my other one has other code which is irrelevant. The arrangement wouldn't be an issue really but I'm echoing elements with PHP as well so that seems to cause issues. I'm not really good with CSS so I'm assuming the issue lies there — Joe, Nov 10 '20 at 13:52

Organising HTML causing spaces between elements

0 Answers0