CODEWITHSUNDEEP
c#asp.nethtmlcss
fred1234
fred1234

Reputation: 429

3 Flexible divs inside a flexible parent div

I am trying to get 3 flexible images to line up horizontally and stay within the confines of their flexible div container which has a flexible background,

the background of the container and the 3 images should all stay in relation to each other positionally so they are always on top of each other. they should get larger and smaller with the size of the browser window but not exceed 800 px in width.

The problem I am having is the background and footer slam to the left and the button divs go right.

My JSFIDDLE

HTML:

<div id="container">
<div id="footer">
    <div id="left">
        <input type="image" name="MyLeftButton" id="MyLeftButton" class="imgstretch" src="Images/MyLeftImage.png" style="border-width:0px;">
    </div>
    <div id="middle">
        <input type="image" name="MyMiddleButton" id="MyMiddleButton" class="imgstretch" src="Images/MyMiddleImage.png" style="border-width:0px;">
    </div>
    <div id="right">
        <input type="image" name="MyRightButton" id="MyRightButton" class="imgstretch" src="Images/MyRightImage.png" style="border-width:0px;">
    </div>
  </div>
</div>

CSS:

#container {
margin: 0em auto 0em auto;
width: 100%;
max-width: 800px;
}

#footer {
width: 100%;
max-width: 800px;
max-height: 80px;
float: left;
text-align: center;
position: fixed;
bottom: 0em;
background-color: #009FC1;
}

#left {
float: left;
max-height: 80px;
max-width: 294px;
width: 36%;
margin-left: 20px;
display: inline-block;
background-color: #CCCCCC;
}

#middle {
max-height: 80px;
width: 25%;
float: left;
max-width: 202px;
display: inline-block;
background-color: #889FC1;
}

#right {
max-height: 80px;
max-width: 294px;
width: 36%;
float: left;
display: inline-block;
background-color: #9999DD;
}

.imgstretch {
width:100%;
}

Upvotes: 1

Views: 398

Answers (1)

Plummer
Plummer

Reputation: 6688

You have a couple of things going on.

1) Footer is set to fixed position, which makes it ignore the parent element and fix itself to the window. I don't know if this is an issue for your layout, but something to note.

2) You have inline styles set on elements that you already have a defined class for. Seems unnecessary.

3) Your dimension calculations are WAY off in relation to your % and px. 36% should be (0.36 * 800) which would come out as 288px, not 294px, and THEN plus a 20px margin.

I've forked your fiddle. http://jsfiddle.net/ZBJPF/8/

html {
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
}
#container {
    margin: 0 auto;
    width: 100%;
    max-width: 800px;
}
#footer {
    width: 100%;
    max-width: 780px;
    max-height: 80px;
    margin: 0 auto;
    padding-left: 20px;
    text-align: center;
    position: fixed;
    bottom: 0;
    background-color: #009FC1;
}
.footer-element-lg {
    float: left;
    width: 36%;
    max-width: 280px; 
    position: relative;
}
.footer-element-sm {
    float: left;
    width: 28%;
    max-width: 220px;
    position: relative;
}
#left {
    background-color: #CCCCCC;
}
#middle {
    background-color: #889FC1;
}
#right {
    background-color: #9999DD;
}
.imgstretch {
    width:100%;
    border: none;
}

<div id="container">
    <div id="footer">
        <div id="left" class="footer-element-lg">
            <input type="image" name="MyLeftButton" id="MyLeftButton" class="imgstretch" src="Images/MyLeftImage.png">
        </div>
        <div id="middle" class="footer-element-sm">
            <input type="image" name="MyMiddleButton" id="MyMiddleButton" class="imgstretch" src="Images/MyMiddleImage.png">
        </div>
        <div id="right" class="footer-element-lg">
            <input type="image" name="MyRightButton" id="MyRightButton" class="imgstretch" src="Images/MyRightImage.png">
        </div>
    </div>
</div>

I removed a 20px margin and made the spacing as a 20px padding for continuity sake.

Upvotes: 2

Related Questions