Content not aligning properly within column

bpburrow · December 17, 2009

Here's my dilemma for the CSS gods to solve. My page is neatly divided into two columns. That is until I added my form. The left column contains a menu and the right column contains the form. However, the form is dropping low on the page. I'll attach a screenshot showing the form details.

Help Please!!

.css for the page layout

/* CSS Document */

@charset "UTF-8";

@media screen, projection
{
  /*-------------------------------------------------------------------------*/

  /* Marginal areas & page background */
  body { background: none /*#4d87c7 url("images/bg_blue.gif") repeat-x top left fixed; padding: 10px 0;*/ }

  /* Layout Alignment */
  .page_margins { margin: 0 auto; }

  /* Layout Properties */
  .page_margins { width: auto; background: transparent; }
  .page { padding: 10px; }
  #header { padding: 45px 2em 1em 20px; color: transparent; background: transparent; }
  #topnav { color: #aaa; background: transparent; }
  #teaser { overflow:hidden; margin-left: 20px; align: right;} 
  #topnav { position:static; color: #aaa; background: transparent; }
  #main { margin: 10px 0; background: transparent; }
  #footer { padding: 10px 20px; color:transparent; background: transparent; border-top: 5px transparent; }

  /*-------------------------------------------------------------------------*/

  /* Formatting content container */

  #col1 { float: left; width: 25%}
  #col2 { display:none}
  #col3 { width: auto; margin: 0 0 0 25%}
  #col1_content { padding: 0 10px 0 20px }
  #col3_content { padding: 0 20px 0 10px }

  /*-------------------------------------------------------------------------*/
}

.css for the form

/* CSS Document */

@charset "UTF-8";

/* text fields */
.textfield_effect {
/* Border styles */
border-width: 1px;
border-style: solid;
border-color: #666;
/* Text formating */
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
width: 200px;
height: 18px;
background-color: #CCC;
}

/* form alignment - Right */
label {    
float: left;    
width: 10em;    
margin-right: 1em;    
text-align: right;
color: #CCC;
}

/* fieldsets */
fieldset {  
float: left;    
clear: both;    
width: 100%;    
margin: 0 0 1.5em 0;    
padding: 0;    
border: 2px solid #999;    
background-color: transparent;
background-image: none;
}  

legend {  
margin-left: 1em;    
padding: 0;    
color: #999;    
font-weight: bold; 
font-family: sans-serif;
font-size: 16px;
}  

fieldset ol {  
padding: 1em 1em 0 1em;  
list-style: none;  
}  

fieldset li {  
padding-bottom: 1em;  
}  

fieldset.submit {  
float: none;    
width: auto;    
border-style: none;    
padding-left: 12em;    
background-color: transparent; 
background-image: none;
}

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */

webpage (most php was removed for easy reading):

<html>
<body>
<div class="page_margins">
<!--  <div id="topnav">
      <!- start: skip link navigation ->
      <a class="skip" title="skip link" href="#navigation">Skip to the navigation</a><span class="hideme">.</span>
      <a class="skip" title="skip link" href="#content">Skip to the content</a><span class="hideme">.</span>
      <!-- end: skip link navigation -><a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a>*/-->
</div>
<div class="page">
	<div id="header">
		<?php do_menu_main2('');?>
	</div>
	<div id="teaser">
		<?php check_login();?>
      	</div>
	<div id="main">
		<div id="col1">
			<div id="col1_content" class="clearfix">
				<?php do_mainadmin_menu('');?>    //no issues here			  
			</div>
		</div>
		<div id="col3">
			<div id="col3_content" class="clearfix">    //I'm having problems somewhere here
				<form enctype="multipart/form-data" action="slideshow_new9.php" method="post" class="clearfix">
					<fieldset class="clearfix">  
						<legend>Setup Slideshow</legend>  
						<ol>  
							<li>  
								<label for="username">Select:</label>  
									<select id="username" name="username" class="textfield_effect" type="text"><?php echo $dd; ?>"</select>  
										</li> 
							<li>  
								<label for="foldername">Folder Name:</label>  
									<input id="foldername" name="foldername" class="textfield_effect" type="text" />  
										</li>  
							<li>
								<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
									<label for="file">Client Image:</label>  
										<input id="file" name="file" class="textfield_effect" type="file" />  
											</li> 
							<li>  
								<label for="active">Active:</label>  
									<select id="active" name="active" class="textfield_effect" type="text"> 
										<option value="yes" selected="selected">Yes</option>
										<option value="no">No</option></select>
											</li> 			 
						</ol>  
						</fieldset>  
					<fieldset class="submit">  
						<input class="submit" type="submit"  name="submit" value="Add Slideshow" />  
					</fieldset>  
				</form>					
			</div>
			<!-- IE Column Clearing -->
			<div id="ie_clearing"> &#160; </div>
			</div>
		</div>
		<div id="footer"><?php do_html_footer();?>
		</div>
	</div>
</div>
</body>
</html>

[attachment deleted by admin]

vinpkl · December 17, 2009

can you post a online link for the page

vineet

bpburrow · December 17, 2009

Try this:

http://www.brittanyburrowphotography.com/slideshow_new.php

vinpkl · December 17, 2009

i m not able to download these

@import url(screen/basemod.css);

@import url(screen/content.css);

http://www.brittanyburrowphotography.com/screen/basemod.css

file not found.

otherwise if i leave these two file and save rest of the files on my local machine then this layout has not problem in IE7 and firefox. in both browsers they look same and fine.

vineet

bpburrow · December 17, 2009

I removed:

@import url(screen/basemod.css);

@import url(screen/content.css);

and an older form formatting .css that seemed to be causing some other problems.

I still have the same problem unless I take out testform.css. Any ideas as to what's causing the form to be pushed down the page?

http://www.brittanyburrowphotography.com/slideshow_new.php

vinpkl · December 17, 2009

ok here is it is

you need to remove clear:both from fieldset style in testform.css

fieldset {  
float: left;    
width: 100%;    
margin: 0 0 1.5em 0;    
padding: 0;    
border: 2px solid #999;    
background-color: transparent;
background-image: none;
}

vineet

bpburrow · December 17, 2009

Just so I'm on the same page, you were referring to .clearfix?? I removed the class .clearfix from both the testform.ccs and throughout the webpage. I'm still having the same problem.

http://www.brittanyburrowphotography.com/slideshow_new.php

bpburrow · December 18, 2009

Nevermind, I'm an idiot. I found clear:both; within fieldset and took it out. Seems to be working fine now.

Thanks for all your help.

Sign In

Content not aligning properly within column

Recommended Posts

bpburrow

Link to comment

Share on other sites

vinpkl

Link to comment

Share on other sites

bpburrow

Link to comment

Share on other sites

vinpkl

Link to comment

Share on other sites

bpburrow

Link to comment

Share on other sites

vinpkl

Link to comment

Share on other sites

bpburrow

Link to comment

Share on other sites

bpburrow

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information