My "tagline" consists of an orange stripe that extends the full width of the screen, 20px high. On the left is a blue 30% wide strip, same height, and on the right a green 30% wide strip. The left and right strips are supposed to be divs positioned just right to cover up the orange full-width strip, but they are not working right.
It looks OK on Chrome 43 on Windows 7. But it has two problems: it affects the menu below it by causing it to wrap (all browsers), and the left and right taglines are not quite lined up properly when viewed in Firefox 39, Safari on iPad, and Chrome on iPad. I have that feeling that I'm doing something really wrong but I don't know what it is. Any ideas?
Here is the fiddle: http://jsfiddle.net/postiffm/kg1gLyrv/
It is live at aahcdc.com so you can see the problem easily.
#Tagline {
display: block;
height: 20px;
border-style: solid;
border-radius: 7px;
border-color: #ff9706;
background-color: #ff9706;
color: white;
font-weight: normal;
letter-spacing: 2px;
text-align: center;
margin-top: 7px;
margin-bottom: 10px;
}
#TaglineLeft {
position: relative;
height: 20px;
width: 30%;
bottom: 21px;
left: -3px;
border-style: solid;
border-radius: 7px;
border-color: #6673aa;
background-color: #6673aa;
}
#TaglineRight {
position: relative;
float: right;
height: 20px;
width: 30%;
bottom: 47px;
right: -4px;
border-style: solid;
border-radius: 7px;
border-color: #7e922e;
background-color: #7e922e;
}<div id="Tagline">My Tag Line.
<div id="TaglineLeft"></div>
<div id="TaglineRight"></div>
</div>The element still takes up space where it originally was when using relative position. I recommend to use absolute position for the two side elements. Simplified demo follows.
#Tagline {
color: white;
font-weight: normal;
letter-spacing: 2px;
text-align: center;
margin-top: 7px;
margin-bottom: 10px;
padding: 5px;
border: 0 solid #ff9706;
border-radius: 7px;
background-color: #ff9706;
position: relative;
}
#TaglineLeft, #TaglineRight {
position: absolute;
height: 100%;
width: 30%;
top: 0;
border-radius: 7px;
}
#TaglineLeft {
left: 0;
border: 0 solid #6673aa;
background-color: #6673aa;
}
#TaglineRight {
right: 0;
border: 0 solid #7e922e;
background-color: #7e922e;
}<div id="Tagline">
My Tag Line.
<div id="TaglineLeft"></div>
<div id="TaglineRight"></div>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments