CSS properties not applying in nested div

Question

I'm trying to create a <div> within a <div> that sits like this

Both containers should have a nice amount of height to them, for some reason when I put the <div> within the <div> it breaks the height and some of the other CSS properties so everything ends up looking squashed.

Is #masthead_topbar inheriting something from the parent <div> or do I need to change something else?

The Code:

#container { width: 951.8px ; height: 600 px ; background-color: #c2c2c2 ; border: solid 1px ; border-color: b8b8b8 ; margin: 0 auto ; display: flex ; align-items: center ; } #masthead_topbar { width: 929px ; min-height: 47.00 px ; max-height: 47.00 px ; background-color: #c2c2c2 ; border: solid 1px ; border-color: b8b8b8 ; margin-left: 10px ; margin-right: 10px; margin-top: 10px ; }

<div id="container"> <!-- Start Masthead TopBar --> <div id="masthead_topbar"> <font>Test</font> <!-- End Masthead_TopBar --> </div> <!-- End Container DIV --> </div>

well , you just have to remove the space between 600 px ; to be 600px; :) — Yahya Essam
– Yahya Essam, Commented Dec 4, 2016 at 0:26
Why does #container have display: flex;? Sidenote: <font> has been deprecated since the end of WW II. If not longer. — connexo
– connexo, Commented Dec 4, 2016 at 0:27
border-color: b8b8b8;probably should be border-color: #b8b8b8;. And that should be assigned to the shorthand property the line above: border: 1px solid #b8b8b8; — connexo
– connexo, Commented Dec 4, 2016 at 0:30
It has been a very long time since I have coded in HTML, looks like I have also picked up some bad habits from Java programming! — Ninja2k
– Ninja2k, Commented Dec 4, 2016 at 11:43

dippas · Accepted Answer · 2016-12-04 00:56:33Z

you have a couple of mistakes, such as:

a space in lengths such as 600 px
not using # in border-color (you can use border shorthand)

Note this:

don't use decimal values in px length.
don't use font, it is deprecated.

here is a working example:

.container { max-width: 950px; /* changed for demo */ height: 150px; /* changed for demo */ border: solid 1px #b8b8b8; margin: 0 auto; display: flex; align-items: center; } .masthead_topbar { width: 100%; border: solid 1px #b8b8b8; margin: 10px 10px 0; padding: 10px; }

<div class="container"> <!-- Start Masthead TopBar --> <div class="masthead_topbar"> Test <!-- End Masthead_TopBar --> </div> <!-- End Container DIV --> </div>

Yahya Essam · Accepted Answer · 2016-12-04 00:50:54Z

well , you just have to remove the space between 600 px ; to be 600px; :) maybe some other things need to be fixed also (the codes between stars ** ** edited ) :

#container { width: 951.8px ; **height: 600px ;** background-color: #c2c2c2 ; **border: 1px solid #b8b8b8 ;** **border-color: #b8b8b8 ;** margin: 0 auto ; display: flex ; align-items: center ; } #masthead_topbar { width: 929px ; **min-height: 47.00px ; max-height: 47.00px ;** background-color: #c2c2c2 ; **border: 1px solid #b8b8b8 ; border-color: #b8b8b8 ;** margin-left: 10px ; margin-right: 10px; margin-top: 10px ; }

Collectives™ on Stack Overflow

CSS properties not applying in nested div

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related