Question

Currently I have this:

My issue with this is that the black bordered box .textMessage needs to align with the box above .alertMessage width wise. I have tried everything to get it to align.

HTML:

<div class="scheduledCenter">
    <p class ="alertMessage"><span class="bold">Important:</span> Your Account is set to Pacific/Auckland Time.  The Time is now <span class="bold">9:30AM</span> on <span class="bold">29th May 2012</span></p> <span class="close"></span>
    <div class="userInformation">
        <span class="userImage"><img src="_assets/images/ava.png" width="46" height="45" alt="Ava"></span>
        <span class="bold">FROM:</span>
        <p class="userDetails">123456789XXX</p>
    </div>
    <div class="textMessage">
        <div class="innerBar">
            <div class="innerTo">
                <form action="#" method="get">
                    <label for="recipients">TO: </label><input type="search" name="recipients" id="recipients" placeholder="Recipients Names">
                </form>
            </div>
            <div class="innerReplies">
                <form action="#" method="get">
                    <label for="replies">Replies: </label><p class="forward">Forward to | 0212133263</p><input type="search" name="replies" id="replies" placeholder="filename.png">
                </form>
            </div>
        </div>
    </div>
</div>

CSS:

.scheduledCenter{
    width:100%;
    min-height:100%;
    padding:10px 0px 0 0px;
}
.scheduledCenter .alertMessage{
    width:100%;
    height:15px;
    color:#3385B2;
    background: #D1DEE8 url('../images/close.png') no-repeat 99% 8px;
    border:3px solid #8099B4;
    border-radius:3px;
    padding:5px;
}
.scheduledCenter .alertMessage .bold{
    font-weight:bold;
}
.scheduledCenter .userInformation{
    float:left;
    width:50px;
    height:100%;
    min-height:100%;
    margin:10px 15px 0 0;
}
.scheduledCenter .userInformation .bold{
    font-weight:bold;
}
.scheduledCenter .userInformation .userDetails{
    padding:10px 0 0 0;
}
.scheduledCenter .userInformation .userImage img{
    margin:0 0 10px 0;
}
.textMessage {
    margin:0 0 0 90px;
    position: relative;
    background: #FFF;
    border: 5px solid #000;
}
.textMessage:after, textMessage:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.textMessage:after {
    border-right-color: #FFF;
    border-width: 10px;
    top: 50%;
    margin-top: -10px;
}
.textMessage:before {
    border-right-color: #000;
    border-width: 17px;
    top: 50%;
    margin-top: -17px;
}
.innerBar{
    width:100%;
    height:60px;
    background-color:#F5F5F5;
}
.innerBar .innerTo{
    width:200px;
    padding:5px 0 0 15px;
    display:block;
    float:left;
}
.innerBar .innerTo label{
    margin:0 15px 0 0;
    font-size:14px;
    font-weight:bold;
    color:#666666;
}
.innerBar .innerTo input[type=search] {
    color: red;
}
.innerBar .innerReplies{
    width:150px;
    padding:5px 0 0 15px;
    background:purple;
    display:block;
    float:right;
}

Answer 1

Remove the width: 100%; declaration in your .selectedCenter .alertMessage selector.
Here’s a version of your code that works like you want it to.

---

Explanation:

Since the element you’re setting its width to be 100% specifically is already a block-level element, it will automatically take up the full width of its container by itself, but by setting its width to be 100%, it will not take its margin/padding/border into account when doing this, and thus, having any of those properties set to be >1, the extra width will stick out from its parent.

.scheduledCenter .alertMessage {
    background: url("../images/close.png") no-repeat scroll 99% 8px #D1DEE8;
    border: 3px solid #8099B4;
    border-radius: 3px 3px 3px 3px;
    color: #3385B2;
    height: 15px;
    padding: 5px;
    /* width: 100%; <-- This is what's causing the problem */
}