CODEWITHSUNDEEP
csshtml
Murhaf Sousli
Murhaf Sousli

Reputation: 13296

CSS inheriting properties to sub-classes

I have a div container "page" divided equally to two div elements "page-left" and "page-right" (width="50%") like a "book"

I'm trying to tell the browser to set the property "float" for any div elements like : (.xlarge, .large, .medium, ..) according to its parent container. so:

if the element is inside page-left it should float:right; and if it is inside page-right it should float:left;

enter image description here

<div class="half-Page page-right">
        <div class="large"><p>MIND</p></div>

so what is wrong with my code?

here is full code:

HTML:

<body>
<div class="container">
    <div id="page1">
    <div class="half-Page page-left">
        <div class="xlarge"><p>RE</p></div>
        <div class="clear"></div>
        <div class="large">
            <div class="medium">
                <div class="small"><p>ME</p></div>
                <div class="xsmall"><p>link</p></div>
            </div>
            <div class="medium"><p>SU</p></div>
        </div>
    </div>
    <div class="half-Page page-right">
        <div class="large"><p>MIND</p></div>
        <div class="large"></div>
        <div class="large"></div>
    </div>
    </div>

</div>
</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */
/* ======== Page number 1 */
 body, html {
}
.container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
    background: url(img/page1.jpg) repeat;
}
#page1 {
    position: relative;
    height: auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 80px;
    margin-left: 80px;
}
.half-Page {
    background: #BD2325;
    width: 50%;
    min-height: 500px;
    height: auto;
}
.page-right .xlarge, .medium, .xsmall, .large, .small {
    float: left;
}
.page-left .xlarge, .medium, .xsmall, .large, .small {
    float: right;
}
/* centralization for all elements */
 .xlarge, .medium, .xsmall, .large, .small {
    margin: auto;
    position: relative;
    top: 0;
    bottom: 0;
    /* vertical center */
     left: 0;
    right: 0;
    /* horizontal center */
}
/* aspect ratio 1:1 */
 .xlarge, .medium, .xsmall {
    width: 100vw;
    height: 100vw;
}
/* aspect ratio 2:1 */
 .large, .small {
    width: 100vw;
    height: 50vw;
}
.xlarge {
    background: pink;
    max-height: 360px;
    max-width: 360px;
}
.large {
    background: #74AA86;
    max-height: 180px;
    max-width: 360px;
}
.medium {
    background: #AFDFD6;
    max-height: 180px;
    max-width: 180px;
}
.small {
    background: #F5FCC2;
    max-height: 90px;
    max-width: 180px;
}
.xsmall {
    background: #C970C3;
    max-height: 90px;
    max-width: 90px;
}
.clear {
    clear: both;
}

Upvotes: 1

Views: 58

Answers (2)

Jirka Kopřiva
Jirka Kopřiva

Reputation: 3089

You have used declaration twice. Last is used.

.page-right .xlarge, .medium, .xsmall, .large, .small {
   float: left;
}

.page-left .xlarge, .medium, .xsmall, .large, .small {
   float: right;
}

Maybe you wanted:

.page-right .xlarge, 
.page-right .medium, 
.page-right .xsmall, 
.page-right .large, 
.page-right .small {
   float: left;
}

and so ...

In this case, maybe faster:

.page-right div { float: left; }

What will set all together. And only make expections fore these elements which won't to use it.

(set float: none;)

Upvotes: -1

TimCodes.NET
TimCodes.NET

Reputation: 4699

When you use commas in the CSS selector, you need to repeat the .page-left before each selector, otherwise it's saying 'select any xlarge element in page left and any medium, xsmall etc element anywhere'

.page-right .xlarge, 
.page-right .medium , 
.page-right .xsmall, 
.page-right .large, 
.page-right .small
{
    float: left;
}

Upvotes: 2

Related Questions