CODEWITHSUNDEEP
htmlcss
BarclayVision
BarclayVision

Reputation: 863

CSS align div inside div inside div

I'm trying to show battalions in a row from top to bottom and fill the full width. I am also trying to get the 8 stations in each battalion to fill the full width and height of each battalion. I will have a total of 5 battalions and 8 stations in each battalion.

see what I have so far in the fiddle: css fiddle

CSS:

<style>
        * { margin: 5; padding: 5; }
        body { text-transform: uppercase; }
        #county { width: 1200px; margin: 20px auto; background: red; }

        #battallion {  }

        .battallions {
        height: 300px; 
        width: auto; 
        margin: 5px 1px 5px 1px; 
        background: #eee; 
        text-align: center; 
        font: bold 8px;
        margin: 10px 5px 10px 5px;  
        padding: 2px 2px;
        border: 2px solid black;  }

        #station9 { /*display: inline; font: 14px; overflow: hidden; resize: none;*/ }
        #station13 { /*display: inline;*/ }

        .stations {
        /*position: relative;*/
        display: inline-block;
        /*left: 5px; */
        height: 12%; 
        width: 11%; 
        margin: 10px 5px 10px 5px; 
        padding: 0; 
        border: 2px solid black; 
        background: powderblue; 
        font: 8px; 
        color: black; 
        /*text-align: left;*/ }
</style>

HTML:

<div id="county">
My County
<div id="battallion5" class="battallions">
Battallion 5<br/>
    <div id="station9" class="stations">
        Hyattestown
    </div>
    <div id="station13" class="stations">
        Damascus
    </div>
    <div id="station14" class="stations">
        Poolsville
    </div>
    <div id="station17" class="stations">
        Laytonsville
    </div>
    <div id="station22" class="stations">
        Kingsview
    </div>
    <div id="station29" class="stations">
        Germantown
    </div>
    <div id="station34" class="stations">
        Milestone
    </div>
    <div id="station35" class="stations">
        Clarksberg
    </div>
<div>

<br/>

<div id="battallion4" class="battallions">
Battallion 4</br>
    <div id="station5" class="stations">
        Kensington 5
    </div>
    <div id="stationR2" class="stations">
        Rescue 2
    </div>
    <div id="station4" class="stations">
        Sandy Spring 4
    </div>
    <div id="station40" class="stations">
        Sandy Spring 40
    </div>
    <div id="station25" class="stations">
        Kensington 25
    </div>
    <div id="station18" class="stations">
        Glenmont 18
    </div>
    <div id="stationxx" class="stations">
        ---
    </div>
    <div id="stationyy" class="stations">
        ---
    </div>
<div>

Upvotes: 0

Views: 54

Answers (1)

David Lee
David Lee

Reputation: 861

You were missing </div> i also fixed the station 40 alignment https://jsfiddle.net/dz5cvkwf/3/

Upvotes: 1

Related Questions