3 table alignment does not work properly?

HTML & CSS
1

Hello guys,
I have a nested div within a popup div. But have a few issues with it.

  1. The sub div inherits the properties of the parent, which I don’t want.

  2. The 3 layer divs do not align properly. See image

  3. Also when I restore the window size, its all out of order.

The 1st and container divs with the blue and red curved top borders are inherited from the parent div, which is wrong

Here is my code
Please advise

many thanks

Ehi



body {
	margin: 0;
	padding: 0;
}
.container_Navigation {
    border: medium solid #FF6600;
    min-width: 500px;
    background-color: #000000;
}

.HomePage_Navigation_GetStarted_left {
    border-style: solid;
    border-color: #003399;
    float: left;
    width: 30%;
    border:none;
}

.HomePage_Navigation_GetStarted_right {
    padding: 0px;
    border-style: dotted;
    border-color: #00CC00;
    float: right;
    width: 30%;
    top: 0px;
    clip: rect(0px, auto, auto, auto);
    vertical-align: top;
}

.HomePage_Navigation_GetStarted_center {
    border-style: outset;
    border-color: #993300;
    margin-right: 33%;
    margin-left: 32%;
}
2

afrika, as you know, css and html work together. CSS alone without the HTML does not reveal the cause of your issues. It would be best if you could post a link so we could see the full page. If that is not possible, then post the HTML and CSS in code boxes in you message.

Your title talks about a table, but the context talks about divs and a “popup” div. I don’t know what a “popup” div is.

It sounds like you might be having a big problem with inheritance. You might want to read about the role that inheritance plays in the application of css properties.

Best of luck.

3

Make sure the html for “.HomePage_Navigation_GetStarted_center” div follows the html for the two other floated columns because floats must come before any static content if you want the static content to rise up. It looks to me as though you have arranged the html as left (float), middle (static), right (float) when it should be; left (float), right (float), middle (static).

But as Ron said we are just guessing until we see the actual html.:slight_smile:

The 1st and container divs with the blue and red curved top borders are inherited from the parent div, which is wrong

Borders are not inherited which means that you must have rules in place that are applying them.