Element manipulation and overflow in divs (HTML) - css

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

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.

Answer 2

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 3

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.