Element manipulation and overflow in divs (HTML)

Question

This is the code implementation

http://codepen.io/anon/pen/emjLMJ

I dont understand why:

• the hyperlinks are not aligned with the bar title

• The dropdown button (black background) is outside of the main quickbar div

  overflow only hides the parts overflowing but doesnt force it inside the main wrapping div.

HTML code

<div id='quick_bar' >
                <div id='bar_title'>
                    <span>Check:</span>
                </div>
            <div id='left_bar' class='qbar'>

                <a href="#" id='show_courts' class ='short_filter'>One</a>
                <a href="#" id='show_clubs'  class ='short_filter'>Two</a>
                <a href="#" id='show_courts' class ='short_filter'>Three</a>
                <a href="#" id='show_courts' class ='short_filter'>Four</a>

            </div>
            <div id='right_bar'>
                <a href="#" id='hideSearchBtn'class='list-group-item'>
                    <span id='DownGly' class ='glyphicon glyphicon-chevron-down'>
                    </span>
                    <span id='UpGly'  class ='glyphicon glyphicon-chevron-up' style="visibility: hidden;">
                    </span>
                </a>
            </div>   
        </div>

CSS Code

#quick_bar {
  width:320px;
    background-color: white;
    height: 18px;
    border-radius: 3px;
    margin-top: 2px;
    border: 1px solid;
    border-color: #dbdbdb;
}

#left_bar a{   
    margin-left: 4px;
    margin-right: 3px;
    font-size: 11px;
    height: 18px;
    font-style: Arial;
    font-weight: bold;
}

#bar_title {
    float: left;
    font-size: 11px;
    font-style: Arial;
    font-weight: bold;
    margin-left: 4px;
}

#right_bar a {
    color: black;
}
#right_bar {
    height: 18px;
    width: 10%;
    float: right;
    background-color: black;
}

Answer 1

• if u add vertical-align: top; to #left_bar a the align problem will be gone.

• when you float something, its gonna stand in its original height. and as the #left_bar is there filling the whole row, #right_bar falls down. to fix it you should put #right_bar div before #left_bar like this

  <div id='quick_bar' >
      <div id='bar_title'>
          <span>Check:</span>
      </div>
      <div id='right_bar'>
          <a href="#" id='hideSearchBtn'class='list-group-item'>
              <span id='DownGly' class ='glyphicon glyphicon-chevron-down'>
              </span>
              <span id='UpGly'  class ='glyphicon glyphicon-chevron-up' style="visibility: hidden;">
              </span>
          </a>
      </div>   
      <div id='left_bar' class='qbar'>
          <a href="#" id='show_courts' class ='short_filter'>One</a>
          <a href="#" id='show_clubs'  class ='short_filter'>Two</a>
          <a href="#" id='show_courts' class ='short_filter'>Three</a>
          <a href="#" id='show_courts' class ='short_filter'>Four</a>
      </div>
  </div>
  

CSS:

#quick_bar {
  width:320px;
  background-color: white;
  height: 18px;
  border-radius: 3px;
  margin-top: 2px;
  border: 1px solid;
  border-color: #dbdbdb;
  }

  #left_bar a{   
    margin-left: 4px;
    margin-right: 3px;
    font-size: 11px;
    height: 18px;
    font-style: Arial;
    font-weight: bold;
    vertical-align: top;
}

#bar_title {
    float: left;
    font-size: 11px;
    font-style: Arial;
    font-weight: bold;
    margin-left: 4px;
}

#right_bar a {
    color: black;
}
#right_bar {
    height: 18px;
    width: 10%;
    float: right;
    background-color: black;
}

Answer 2

The browser is adding default styles to your anchor tag. Try changing the display type for your links to display:block; or you can float your links left and add padding/margin to separate them. You can also add line-height: 17px; to your span. That should do the trick as well.

Answer 3

I made a few changes to your codepen; http://codepen.io/anon/pen/VYBGqX

To start with I took your span out of its own separate div, and removed the height from bar_title, which fixed your vertical alignment issues.

<div id='left_bar' class='qbar'> <span id='bar_title'>Check:</span> <a href="#" id='show_courts' class ='short_filter'>One</a> <a href="#" id='show_clubs' class ='short_filter'>Two</a> <a href="#" id='show_courts' class ='short_filter'>Three</a> <a href="#" id='show_courts' class ='short_filter'>Four</a> </div>

I then added an extra style to float the left_bar to the left

#left_bar { float: left; }

I found that this fixed the black box issues.

Not sure what you mean about the wrapping/overflow issues.