CODEWITHSUNDEEP
htmlcss
Tyler Adams
Tyler Adams

Reputation: 3

Child divs going outside of parent divs

My code: https://jsfiddle.net/k0hqzcwg/

I'm not understanding why the message button is moving outside of the parent div. I've tried clearing floats both with adding clear: both, and adding a clearfix class but have not gotten any results.

In summary, I am trying to start a competing video sharing service with Youtube, my immense skill in CSS and Html are sure to pull through and give me the one up. Sarcasm

Any tips are welcome, I know I have a lot to learn.

For those who dont want to click the link:

Html:

<body>

<div id="headingbarholder">
<div id="headingbar">
<div id="heading-submit-avatarholder">
<div id="headingmessagebutton">
<span id="messagebuttoncontent" style = text-align: middle;>Message</span>
</div>
<div id="headingavatar">
<img id="heading-avatar" src="Removed Link" width = 45px; height = 45px;></img>
</div>
</div>
<img id="logo" src="Remove Link" width = 45px; height = 45px; display = inline-block;></img>
</div>
</div>

</body>

Css:

body {
    color: White
    font-size: 11px;
    font-family: arial,sans-serif;
    line-height: 15px;
    background-color: #F1F1F1;
    margin: 0 -8px 0 -8px;
}


#headingbarholder{
    position:fixed;
    left:0;
    width: 100%;
}

#headingbar{
    position: relative;
    background-color: #fff;
    padding:7px 30px 8px 30px;
    border-bottom: 1px solid #E8E8E8;  
}


#heading-submit-avatarholder{
    float: right;
    right: 0px;
    width: 160px;
}

#headingmessagebutton {
    background-color: #F8F8F8;
    color: #333;
    font-weight: bold;
    font-size: 11px;
    height: 28px;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
    border: 1px solid #D3D3D3;
    border-radius: 2px;
    display:inline-block;
    padding: 0px 13px;
    box-sizing: border-box;
    line-height:normal;
}

#headingavatar{
    width: 45px;
    height: 45px;
    display:inline-block;
}

Upvotes: 0

Views: 81

Answers (2)

sqe
sqe

Reputation: 1716

I would use a button instead and float it: Fiddle

Upvotes: 0

Brady Liles
Brady Liles

Reputation: 723

Float the button left.

Here:

#headingmessagebutton {
  background-color: #F8F8F8;
  color: #333;
  font-weight: bold;
  font-size: 11px;
  float: left;
  height: 28px;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
  border: 1px solid #D3D3D3;
  border-radius: 2px;
  display: inline-block;
  padding: 0px 13px;
  box-sizing: border-box;
  line-height: normal;
}

Upvotes: 1

Related Questions