How to prevent CSS block elements from affecting parent inline-blocks


Tags: html,css

Problem :

I am having an issue with elements inside an inline-block parent. The child elements of one are affecting the other. It is tough to explain but it is easy to see in my fiddle, that the div on the right is being pushed down.

I have tried various things, but I am sure there is a simple solution. Any advice is appreciated.

http://jsfiddle.net/62asy/

HTML:

<div id="schedule"> 
            <div class="scheduleChoice">Leagues
                <select name="leagueList" id="leagueList" class="scheduleChoiceList">
                    <option value="0">Select a League</option>
                                    <option value="leagueId_246"> Aassss</option>

                                    <option value="leagueId_245"> aaa</option>
                                                    </select>
                <select name="teamList" id="teamList" class="scheduleChoiceList">
                </select>
                <div class="scheduleChoiceSubmit">Submit</div>
            </div>
            <div class="scheduleChoice">Arena
                <select name="arenaList" id="arenaList" class="scheduleChoiceList">
                    <option value="0">Select an Arena</option>
                                    <option value="arenaId_2"> ffffff</option>

                                    <option value="arenaId_1"> ffffff</option>
                                                    </select>
                <div class="scheduleChoiceSubmit">Submit</div>
            </div>                  
        </div>

CSS:

#schedule {
background-color: rgba(0, 0, 0, 0.44);
overflow: hidden;
text-align: center;
}
.scheduleChoice {
display: inline-block;
width: 25%;
background-color: rgba(190, 216, 255, 0.54);
height: 200px;
padding: 5px;
border-radius: 5px;
margin: 20px 25px;
}
.scheduleChoiceList {
width: 200px;
padding: 5px;
border-radius: 4px;
display: block;
margin: 10px auto;
}


Solution :

Add vertical align top

.scheduleChoice {
  vertical-align: top;
}

Edited fiddle

http://jsfiddle.net/62asy/1/


    CSS Howto..

    CSS - How to stack divs by columns of 2

    newbie css/php question - how to get a div between a label and an input with cakephp

    How to hide repeated content from search engines with CSS?

    Why does overflow hidden affect height and how can I fix it in this example?

    Google font shows boxes in Internet Explorer 8 - IE 8

    How can I get jQuery or Javascript to change css based on the current url?

    How to use CSS transition effects

    How can I make a split-text input placeholder?

    Foundation 5-How to center position the class 'row' regardless the browser size?

    How overlay two pictures to another using HTML-CSS?

    How to specify the system’s default serif and sans-serif font-family?

    How to increase cell height of GWT celltable : Issue with IE?

    Last inherited display property is inline but computed is block. How is this even possible?

    How to programmatically download all contents of webpage, not only the source code in Java

    How to apply css to div which has no class?

    How does one make one table column header taller than the rest?

    How do I use CSS and JS files within a HTML file being sent with Express?

    How can i perform a smooth css transition to my sticky bar?

    How to specify another font size for IE7 and IE8

    How to give equal width for all the fields in the form with validations?

    How do I create a bar chart in CSS with an array of PHP float values?

    I need to edit the css properties of a link when it's active (a:active) with jquery after they have been set by normal html css. How do I do that?

    How to align a

    into

    or when content it is dynamic?

    How to convert 6 digit color code to 3 digit quickly in css file?

    How to correct Div overlapping?

    How to place differently sized images in 2 columns with figcaption aligned

    How can I have a responsive height with absolutley position child elements

    How to change css class according to the name attribute of a parent

    nth-of-type css, how to setup it properly

    How To Make Entire 'li' Area and Text A Clickable Link