I'm trying to achieve a same height border line between divs that are floated left using display:table-cells. I understand that if I change float:none, the heights of the divs are equal but for some reason I can't change float:left to none.
Is there a way to make the divs equal height with float:left ?
See this image to explain the problem and what I'm trying to achieve
Code :
<!doctype html>
<html>
<head>
<style>
.c-grids {display:table}
.c-grid {display:table-cell;float:left;border-left:1px solid red;padding:0 20px;}
.c-grids input {display:block;}
</style>
</head>
<body>
<div class="c-grids">
<DIV class="c-grid c-grid-1of4">
name<INPUT type=text autocomplete="off" name="text1" value="">
</DIV>
<DIV class="c-grid c-grid-2of4">
<INPUT type=text autocomplete="off" name="text2" value="">
</DIV>
<DIV class="c-grid c-grid-3of4">
<INPUT type=text autocomplete="off" name="text31" value="">
<INPUT type=text autocomplete="off" name="text32" value="">
</DIV>
<DIV class="c-grid c-grid-4of4">
<INPUT type=text autocomplete="off" name="text41" value="">
<INPUT type=text autocomplete="off" name="text42" value="">
<INPUT type=text autocomplete="off" name="text43" value="">
</DIV>
</div>
</body>
</html>
Thanks,
CT
Related
I am trying to build a log in with textfields that have padding on them. But the problem is that it doesn't seem to work. I don't know if it is the height or the padding but there must be something wrong because it used to work and after I opened the page again it didn't, I don't know why.
Here is the CSS:
.Login-Textfield{
width:280px;
height:20px;
padding:15px;
background-color:#EEE;
border:none;
outline:none;
color:#222;
text-align:right;
font-size:20px;
font-family:main;
}
And here is the HTML:
<!-- Login -->
<div class="Content-590">
<div class="New-Offer-Header"><span class="FL"><img src="../images/logo-2.png" width="160" height="70" /></span><span class="FR"><img src="../images/offer-header.png" width="160" height="70" /></span></div>
<div class="New-Offer-Content">
<form action="../ex/ad/create-offer.php" method="POST">
<div class="New-Offer-570">
<input type="text" name="title" class="New-Offer-Textfield-Long MB10" dir="rtl" placeholder="عنوان الإعلان" value="" />
</div>
<div class="New-Offer-Right ML10">
<select type="text" name="section" class="New-Offer-Select MB10" dir="rtl">
<option>أختر القسم</option>
<option value="value">option</option>
</select>
</div>
<div class="New-Offer-Left">
<input type="text" name="talent" class="New-Offer-Textfield MB10" dir="rtl" placeholder="الموهبه" value="<?php form_values('talent'); ?>" />
</div>
<div class="New-Offer-570">
<textarea type="text" name="description" class="New-Offer-Textarea MB10" dir="rtl" placeholder="الوصف"><?php form_values('description'); ?></textarea>
</div>
<div class="New-Offer-570 F28">:أرغب في</div>
<br />
<div class="New-Offer-570">
<div class="New-Offer-Remember"><input type="checkbox" name="work" class="Switch" id="work" /><label dir="rtl" for="work">تذكرني</label></div><div dir="rtl" class="New-Offer-Remember-Text F24">العمل</div>
<div class="New-Offer-Remember"><input type="checkbox" name="freelance" class="Switch" id="freelance" /><label dir="rtl" for="freelance">تذكرني</label></div><div dir="rtl" class="New-Offer-Remember-Text F24">العمل المستقل</div>
</div>
<div class="New-Offer-570">
<div class="New-Offer-Remember"><input type="checkbox" name="part_time" class="Switch" id="part_time" /><label dir="rtl" for="part_time">تذكرني</label></div><div dir="rtl" class="New-Offer-Remember-Text F24">العمل الجزئي</div>
<div class="New-Offer-Remember"><input type="checkbox" name="train" class="Switch" id="train" /><label dir="rtl" for="train">تذكرني</label></div><div dir="rtl" class="New-Offer-Remember-Text F24">التدريب</div>
</div>
<div class="New-Offer-570"><center><input type="submit" class="New-Offer-Submit" value="!أضف موهبتك" /></center></div>
</form>
</div>
</div>
Can you tell what is the problem?
Please visit the page: http://www.mawhibaty.com/login.php
Your page looks fine to me, so I don't know what is the problem. But maybe you should not specify both the height and the padding. If you specify the font size and the padding, the height should adjust automatically. If you specify the font size and the height, the padding should adjust automatically. I think you should define only two of the three: font size (including the default white space above and below the letters) and padding, or font size and the height of the input text field.
The text input fields do have some padding, but I have no idea of knowing if it's as much as you want. I would try removing the "height" from your CSS because the padding will determine the height.
I have found a solution ...
All I needed was to remove the height and the padding will work great for text field. I don't know why but it worked.
I was trying to place a form over an image that I wanted to have it as a background in my whole homepage. Everything works fine. The only problem is that I want to place table some pixels lets 50 more to down. Also I would like to place table not to the end of right, but lets say 30 pixels before of it. Any ideas ?
This is my html code:
<html>
<head>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="text">
<div class="homepageTable" width:40px; margin-right:auto; margin-left:auto; style="text-align:right" >
<form action="#" method="post">
<input type="text" size="25" name="first_name" placeholder="first name"><br/>
<input type="text" size="25" name="last_name" placeholder="last name"><br/>
<input type="text" size="25" name="email" placeholder="email"><br/>
<input type="text" size="25" name="retype_email" placeholder="retype your email"><br/>
<input type="text" size="25" name="password" placeholder="password"><br/>
<input type="text" size="25" name="retype_password2" placeholder="retype your password"><br/><br/>
<input type="checkbox" name="I_accept_terms" value=" "><br/>
<input type="submit" value="" name="submit" style="background:url('img/login_button_1.jpg') no-repeat; width:300; height:50; border:none;"/>
</form>
</div>
</div>
</body>
</html>
and this is my css file:
#text
{
width: 961px;
height:219px;
position: relative;
background-image: url(../img/back_img_green.jpg);
background-repeat: none;
}
Any ideas ?
Thanks Stefanos
Absolutely position the image inside a relatively positioned div. Then absolutely position the form by the offset from top left that you want and give the form a higher z-index. Either that or set the image to be the background of the div.
I have a page with this structure:
<div>
<div id="container">
<div id="content" >
<div class="question buttons clearfix nobg">
<input id="k3" name="k" type="hidden" value="">
<input id="h3" name="h" type="hidden" value="b07e0bc1c3751d34acbef5b8546b29ae">
<input id="s3" name="s" type="hidden" value="eyJwYWdlcGF0aCI6IFswXX0=">
<input type="hidden" name="page" value="0">
<input type="hidden" name="SID" value="1f7d2a9b3b9450ce2dd746bf0005ebe1">
<input type="hidden" name="_terminated_redirect" value="">
<div id="button-fix" class="button-fix" style="text-align:center">
<input type="hidden" name="referer" value="">
<input id="next-submit-button" type="submit" name="submitbutton" value="Submit">
</div>
</div>
</div>
</div>
</div>
I want to align to center using css. What will be style tag for it ?
Please suggest
You need to set a width on your outer DIV (maybe give it an ID of wrapper or similar) and then set it's margins - see below:
#wrapper {
width:960px; /* whatever you want this to be */
margin:0 auto;
}
CSS:
#container {margin: 10% auto;}
Fiddle: http://jsfiddle.net/As2yB/
<style>
#button-fix {
margin: 0 auto;
}
</style>
Here's a demonstration of your examle in jsFiddle
is it wrong if I use span-x to define element width?
<div class="search span-7 prepend-17 last">
<fieldset>
<form action="index.php" method="get">
<input type="hidden" name="page" value="found"/>
<input class="span-4" type="text" MAXLENGTH="25" placeholder="Enter text to search" name="search"/>
<input class="span-3 last" type="submit" value="search" />
</form>
</fieldset>
</div>
Not at all. Span only assigns a width, float and margin. As long as this is what you want for your element there's no problem using it.
I'm roughing a layout together and doing some browser testing. Never came across this issue before, check out the contact form in the footer of this page
http://staging.terrilynn.com/fundraising/
There is a div with a width of 298px floated to the right that comes first in the source order. It is followed by several other divs, each with their child form elements floated left.
The div's that should appear to the left of right-floated message div are disappearing.
Page displays correctly in firefox. Any help would be appreciated.
<div id='footer-contact-form'>
<h1>Request Information <span class='note'>(all fields required)</span></h1>
<form class="monkForm" method="post" action="http://my.ekklesia360.com/FormBuilder/handleSubmit.php" id="footer-info-request">
<fieldset>
<legend>Footer Info Request</legend>
<div class="textarea required" id="w2376">
<p class="data">
<label for="area_2376">Message</label>
<textarea id="area_2376" name="e_2376" rows="5" cols="20"></textarea>
</p>
</div>
<div class="text required" id="w2377">
<p class="data">
<label for="text_2377">Name</label>
<input id="text_2377" type="text" name="e_2377" value="" />
</p>
</div>
<div class="text required" id="w2378">
<p class="data">
<label for="text_2378">Phone</label>
<input id="text_2378" type="text" name="e_2378" value="" />
</p></div>
<div class="text" id="w2379">
<p class="data">
<label for="text_2379">Email</label>
<input id="text_2379" type="text" name="e_2379" value="" />
</p>
</div>
<p id="formsubmit"><input type="submit" name="submit" value="Send" /></p>
<input type="hidden" name="token" value="8143f99c1d01b4d1207dbe7860e5586d" />
<input type="hidden" name="SITEID" value="2185" />
<input type="hidden" name="cpBID" value="367780" />
<input type="hidden" name="formslug" value="footer-info-request" />
<input type="hidden" name="CMSCODE" value="EKK" />
<input type="hidden" name="fkey" value="" />
</fieldset>
</form>
</div><!-- #footer-contact-form -->
I guess I found the problem:
screen.css (line 382)
#footer-contact-form div {
margin:0 300px 10px 0;
overflow:hidden;
}
"overflow:hidden" causes the problem.
Have you tried not floating the <p> elements to the left? Why are you actually doing this? It isn't required in the current layout.
Wow that worked!
I was using overflow:hidden to force the div to contain the floated label and input elements.
But really the float on the input elements wasn't necessary.
Thanks you all very much.