I have problem in horizontal

HTML & CSS
1

Hi, I need some help on how can i prevent my element that it will not overlap to other element.I have 1 div
inside of it is, label,textbox,checkbox,and image button in horizontal form.but when i am going to press the crtl+mouse wheel.the element is starting moving and it will overlap to other element…how can i fixed this.?

Thank you in advance.

2

Can you post a link to an example? Or post a working example here.

3

Hi ralph, i do apologize i forgot to put my source code…

here it is, when you ctrl+mouse wheel as you can observe that the checkbox and the textbox well overlap and it will not align properly…Thank you in advance…


<!DOCTYPE html>


<html>


    <head>
        <title>Test</title>

        <style type="text/css">

            #firstdiv{
               float: left;
            }
            #firstdiv input{
                margin-left: 5px;
            }

            #seconddiv{
                float: left;
            }

            .wrapperclass{
                width: 80%;
            }
        </style>
    </head>

    <body>
    <div class="wrapperclass">
        <div id="firstdiv">

            <label>Please input</label>
            <input type="text">
        </div>

        <div id="seconddiv">
            <input type="checkbox">
            <input type="text"/>
        </div>

    </div>

    </body>
</html>
4

Not sure what you mean by that. I can’t see a problem like that in the code.

5

Have you tested my code?

6

I attached a picture so that you can see what i mean…Thank you in advance.

7

OK, I see. It doesn’t do that in my browser. What browser are you using?

8

The line will do that if it is reduced in size enough in FF and IE8. That’s illegibly small, though. Seems silly, IMO.

9

mozilla firefox.

10

jemz, try this:


<!DOCTYPE html>
<html>
<!--

-->
<head>
    <title>Test</title>
    <style type="text/css">

.wrapperclass {
    width:80%;
}
#firstdiv input {
    margin-left:5px;
}
input {
    vertical-align:middle;
}
    </style>
</head>
<body>

<div class="wrapperclass">
    <span id="firstdiv">
        <label>Please input</label>
        <input type="text"/>
    </span>
    <span id="seconddiv">
        <input type="checkbox"/>
        <input type="text"/>
    </span>
</div>

</body>
</html>

Tested in FF17 and IE8.

11

Hi, thanks what is the logic on this?..by the way what causes my code that will destroy or overlap when my page is resize into small?..Thank you in advance

12

Hi, ralph i need some help on my one div, i could not align horizontally in the Level Dept.

I want that my submission label and input will be align horizontally in the Level Dept and input.

here is the code


<!DOCTYPE html>
<html>
	<head>
			
	 <style type="text/css">
		 .outer-wrapper {
		 width: 80%;
		 margin: 58px 0 0 13px;
		 
		 
		 }
		 
		 .outer-wrapper div {
		 float: left;
		 min-width: 1000px;
		 padding: 0 0 0.75em 0;
		 
		 }
		 
		 .outer-wrapper label {
		 width: 160px;
		 float: left;
		 padding: 8px 5px;
		 
		 }
		 

		 
	 
	 </style>
				
	</head>
	 <body>
		<div class="outer-wrapper">
					<div>
						<label>Series number</label>
						<input type="text"/>
					</div>

					<div>
						<label>Level Dept</label>
						<input type="text"/>


					</div>


					<div>
						<label>Submission date</label>
						<input type="text"/>

					</div>
		</div>
	 </body>
 </html>
13

I’m not sure that I understand the question, but try this and let us know if it satisfies your need:


<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

.outer-wrapper {
    width: 80%;
    margin: 58px 0 0 13px;
}

.outer-wrapper div {
    float: left;
    min-width: 1000px;
    padding: 0 0 0.75em 0;
}

.outer-wrapper label {
    width: 160px;
/*    float: left;            /* delete this */
    display:inline-block;    /* add this */
    padding: 8px 5px;
}
    </style>
            
</head>
<body>
    <div class="outer-wrapper">
        <div>
            <label>Series number</label>
            <input type="text"/>
        </div>
        <div>
            <label>Level Dept</label>
            <input type="text"/>
        </div>
        <div>
            <label>Submission date</label>
            <input type="text"/>
        </div>
    </div>
</body>
</html>
14

Hi, thank you for the reply…hmmm. the subbmission date should in the right side and align it to the Level dept

sample

Level date ___________ submission date ______________