I know this html is sloppy, with some extra divs that are unnecessary, but regardless, I can't understand why the div with ID "info_box_right" is aligning to the bottom of the parent div (you can see the "text" aligned to the bottom at the below jsfiddle example).
Any ideas how I can get it to align to the top of its parent?
http://jsfiddle.net/taddme0y/1/
HTML:
<div id="info_container" >
<div id="info_box">
<hr class="info_box_hr" noshade>
<a id="info_box_title"></a>
<hr class="info_box_hr" noshade>
<div id="info_box_wrapper">
<div id="info_box_left">
<div class="info_box_sub_wrapper">
<a id="info_box_logo">
<img class="info_img" id="info_img_logo" alt="logo">
</a>
<a id="info_box_screenshot">
<img class="info_img" id="info_img_screenshot" alt="screenshot">
</a>
</div>
</div>
<div id="info_box_right">
<div class="info_box_sub_wrapper">
<a id="info_box_right_text">
Text
</a>
</div>
</div>
</div>
</div>
</div>
CSS:
#info_container {
z-index: 500;
position: relative;
top: 0;
left: 0;
width: 80%;
height: 0;
margin: 0 auto;
background-color: #000000;
}
#info_box {
z-index: 500;
position: relative;
top: 50px;
width: 100%;
background-color: #FFFFFF;
text-align: center;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}
#info_box_wrapper {
position: relative;
display: block;
width: 100%;
margin: 0 auto;
text-align: center;
}
#info_box_left {
display: inline-block;
position: relative;
margin: 0 auto;
width: 45%;
min-width: 100px;
}
#info_box_right {
display: inline-block;
position: relative;
margin: 0 auto;
width: 45%;
min-width: 100px;
/* margin-bottom: 20px; */
}
.info_box_sub_wrapper {
position: relative;
display: inline-block;
width: 100%;
margin: 0 auto;
text-align: center;
}
#info_box_right_text {
position: relative;
color: #4D4D4D;
}
#info_box_logo, #info_box_screenshot {
position: relative;
width: 100%;
margin: 0 auto;
background-color: transparent;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
border-style: transparent;
border-color: #4D4D4D;
border-width: 2px;
cursor: pointer;
}
.info_img {
width: 100px;
margin: 20px;
background-color: #000;
}
You can specify how you want an element to vertically align using the vertical-align CSS property.
#info_box_right {
vertical-align: top;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.