I have problem in horizontal

**jemz** · Nov 22, 2012 10:06

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.

**ralph.m** · Nov 22, 2012 17:39

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

**jemz** · Nov 26, 2012 07:50

Originally Posted by ralph.m

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

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...

Code:

<!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>

**ralph.m** · Nov 26, 2012 07:56

Originally Posted by jemz

when i am going to press the crtl+mouse wheel

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

**jemz** · Nov 26, 2012 08:12

Originally Posted by ralph.m

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

Have you tested my code?

**jemz** · Nov 26, 2012 08:39

Originally Posted by ralph.m

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

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

**ralph.m** · Nov 26, 2012 16:23

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

**ronpat** · Nov 26, 2012 17:05

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

**jemz** · Nov 26, 2012 22:27

Originally Posted by ralph.m

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

mozilla firefox.

**ronpat** · Nov 27, 2012 04:16

jemz, try this:

Code:

<!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.

**jemz** · Nov 27, 2012 06:22

Originally Posted by ronpat

jemz, try this:

Code:

<!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.

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

**jemz** · Dec 5, 2012 08:13

Originally Posted by ralph.m

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

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

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>

**ronpat** · Dec 5, 2012 17:23

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

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;            /* 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>

**jemz** · Dec 6, 2012 08:20

Originally Posted by ronpat

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

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;            /* 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>

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 ______________

User Tag List

Thread: I have problem in horizontal

Thread Tools

Display

I have problem in horizontal

Bookmarks

Bookmarks

Posting Permissions