CODEWITHSUNDEEP
htmlcssforms
keewee279
keewee279

Reputation: 1654

CSS: Setting styles on form or main content not working (but inside)

I am new to CSS and hope someone can help me with this.

I have an HTML page that contains an HTML form with the below structure.

Everything works fine so far but for some reason I am unable to apply certain styles to the "main" section or the form, esp. a border or a background-color style.

I tried adding some of the following to both the section and the form and both using IDs and classes, with no effect - even if I add !important:

The only thing I am able to set on the above is a margin which works.

However, if I set border or background styles to the inner divs (e.g. for class "frmLine") it works just fine so my guess is that for some reason the inner styles are overlapping any styles applied to the parenting form and section.

Can someone tell me how I can resolve this ? Could the reason be that there is no margin or padding between the parenting section / form and the inner divs ?

My HTML: 

<div class="wrapper">
    <?php require_once("includes/menu.php"); ?>
    <section id="main">
        <form id="frmRequest">
            <div class="col-12">
                <span class="frmTitle">Some title</span>
            </div>
            <div class="col-12 frmLine">
                <div class="col-3 frmCaption">Some caption</div>
                <div class="col-9">Some form field</div>
            </div>
            <div class="col-12 frmLine">
                <!-- ... -->

My CSS (relevant styles): 

html, body {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
}
.wrapper {
    height: auto;
    margin: 0 auto -140px;
    min-height: 100%;
    overflow: auto;
    padding: 0 0 140px;
}
#main {
    border: 1px solid #000; /* This is what is not working ! */
    margin-left: 8.33%;
    margin-right: 8.33%;
}
.frmCaption {
    font-weight: bold;
}
.frmField {
    display: block;
    width: 100%;
}
.frmLine {
    margin: 0;
    padding: 0;
}

Update: I did some further testing which showed this is caused by the CSS. I then removed all styles and re-added them step by step which showed that the issue is caused by my grid styles (see below), specifically by the floating styles on them. As soon as I add these styles the border around the main section disappears resp. gets moved above the section - can someone tell me how I can fix this ?

/* ... */
.col-12 {
    width: 100%;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}   
.row:after {
    clear: both;
    content: '';
    display: block;
}

Many thanks in advance, Mike

Upvotes: 0

Views: 524

Answers (1)

BillyNate
BillyNate

Reputation: 908

Somehow, the default value for the overflow of (most of the, if not all) block level elements (being visible) causes the overflowing elements to be visible, but the element itself to not adjust its own size. By setting the overflow to hidden the element does adjust its own size.

#main {
    border: 1px solid #000;
    margin-left: 8.33%;
    margin-right: 8.33%;
    overflow: hidden;
}

Upvotes: 1

Related Questions