CSS - Trouble Positioning Elements

How do i layout elements within a div without effecting everything outside the container div? this has been frustrating me, everything on the page seems to get effected.

i want the div (question) and the div (answer) next to each other..... i thought position:relative does this since it changes position from the container div.

The below code has the div(answer) below the div(question). I put top:0px; and position:relative assuming they both start at the top of the container div.
Code:

<div id="adult">
	<?php echo "<ul><li>test1</li></ul>";  ?>
	</div>
	<div id="qanda">
	<?php  echo "
<div id='questions'>
 <ul id='questionsul'>
 <li><font color='#FFFFFF' face='Century Gothic' size='5px'>QUESTION</font><font color='#FFFFFF' face='Arial' size='5px'>?</font></li>
 </ul>
</div>

<div id='answers'>
 <ul id='answersul'>
  <li><font color='#D99C29' face='Century Gothic' size='5px'><a href='answer.php?id=1&search=$search' style='text-decoration:none' class='Options6'>Answer</a></font></li>
 </ul>
</div>
 

";  ?>
	</div>
<div id="amount"">
	<?php echo "<ul><li>test3</li></ul>";;  ?>
		
	</div>
		<div id="results">
	<?php echo "<ul><li>test4</li></ul>";  ?>
	</div>
	<div id="contributing">
	<?php echo "<ul><li>test5</li></ul>";  ?>
	</div>
	<div id="advert">
	<?php echo "<ul><li>test6</li></ul>";  ?>
	</div>
	</div></div>

CSS

Code:

#questions{
position:relative;
top:0px;
text-align:left;

}

#answers{
position:relative;
top:0px;
text-align:right;


}


#adult{
width:700px;
margin:0 auto;

}

#qanda {
width:700px;
margin:0 auto;
}

#amount {

width:700px;
margin:0 auto;
}

#results {
width:700px;
margin:0 auto;

}

#contributing {
width:700px;
margin:0 auto;

}
#advert {
width:700px;
margin:0 auto;

}

I'm new to CSS. But I need to position four form elements in a very thin nav bar. Here is my HTML code:
Code:

            <div id="nav">
                 <div id="nav_left">
                <a href="index.php">Home</a> |<a href="complete.php"> Browse All Titles</a> | <a href="author.php">About Author</a></div>
                <div id="bookmark"><table width="307" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="64" valign="middle">Browse by</td>
<td width="113" valign="middle"><form action="" method="get">
                        Title
                        <select name="var" size="1">
                              <option value="A">A</option>
                              <option value="B">B</option>
                              <option value="C">C</option>
                              <option value="E">E</option>
                              <option value="F">F</option>
                              <option value="G">G</option>
                              <option value="H">H</option>
                              <option value="I">I</option>
                              <option value="J">J</option>
                              <option value="K">K</option>
                              <option value="L">L</option>
                              <option value="M">M</option>
                              <option value="N">N</option>
                              <option value="O">O</option>
                              <option value="P">P</option>
                              <option value="Q">Q</option>
                              <option value="R">R</option>
                              <option value="S">S</option>
                              <option value="T">T</option>
                              <option value="U">U</option>
                              <option value="V">V</option>
                              <option value="W">W</option>
                              <option value="X">X</option>
                              <option value="Y">Y</option>
                              <option value="Z">Z</option>
                              <option value="1">1</option>
                              <option value="2">2</option>
                              <option value="3">3</option>
                              <option value="4">4</option>
                              <option value="5">5</option>
                              <option value="6">6</option>
                              <option value="7">7</option>
                              <option value="8">8</option>
                              <option value="9">9</option>
                              <option value="0">0</option>

                </select><input type="image" class="inputbutton" src="img/input.jpg" alt="" width="15" height="15">
</form></td><td width="123" valign="middle"><form action="" method="get">Decade <select name="var" size="1">
                                 <option value="1950">1950s</option>
                                 <option value="1960">1960s</option>
                                 <option value="1970">1970s</option>
                                 <option value="1980">1980s</option>
                                 <option value="1990">1990s</option>
                                 <option value="2000">2000s</option>
                      </select><input type="image" class="inputbutton" src="img/input.jpg" alt="" width="15" height="15">
</form></td>
  </tr>
</table>
                  
                </div>                            
            </div>

And here are the applicable styles:
Code:

#nav {
    background-image: url(../img/navback.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    border: thin solid #7a8251;
    height: 25px;
    width: 771px;
}
#nav_left {
    width: 400px;
    float: left;
    text-align: left;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 7px;
    padding-left: 5px;
}
#bookmark {
    width: 300px;
    float: right;
    text-align: right;
    display: inline;
    padding-top: 5px;
    padding-right: 3px;
    padding-bottom: 5px;
}
.inputbutton {
    margin-right: 3px;
    margin-left: 3px;
}
select {
    display: inline-table;
    font-size: 75%;
    padding: 0px;
}

But, the form elements are sitting low and not aligning as needed. The input buttons are sitting too high.

They sit lot in Firefox on a Mac. On IE 7, the dropdowns sit even lower.

I don't know what to do! Any ideas?

Jeremy

Ok, I have a really weird problem (don't you love it when people start like that?). I have four elements absolutely positioned inside of a relatively positioned div. As you probably already guessed, everything renders correctly in FF/Moz, but screws up in IE.

In the following code, please ignore any validation mistakes, as the real page does validate xhtml 1.0 strict. Code:

<div id="outside">
  <div id="inside">
    <img id="logo" src="logo.png" />
    <img id="banner" src="banner.png" />
    <img id="topRightCorner" src="topRightCorner.png" />
    <img id="bottomLeftCorner" src="bottomLeftCorner.png" />
  </div>
</div>

Code:

#outside #inside{
  position: relative;
  top: 0;
  left: 0;
  /* positioned parent */
}
#outside #inside #logo{
  position: absolute;
  top: 50px;
  left: 50px;
  /* logo */
}
#outside #inside #banner{
  position: absolute;
  top: 60px;
  left: 75px;
}
#outside #inside #topRightCorner{
  position: absolute;
  top: 0;
  right: 0;
}
#outside #inside #bottomLeftCorner{
  position: absolute;
  bottom: 0;
  left: 0;
}

The first three position corectly. "bottomLeftCorner" seems to follow its own path, and aligns its self to the bottom of the "outside" div. If I remember correctly, absolute positioning of an element will position it absolutely (duh) in relation to its nearest positioned parent, which in this case is my "inside" div.

Here's where it gets quirky (no pun intended) though. When I change the position attribute from "bottom" to "top", the element will gladly position its self wherever I want it, within the "inside" div.

Is the "bottom" attribute causing a problem within IE? Am I trying to reference too many child ID's for IE to handle? Am I missing a rule that says the parent has to have the EXACT same atributes as the child? I assume the answer to all three is no, but I thought I'd give it a shot here anyways. Any ideas? Thanks, all!

I'm new to css. I learned how to center a layout so it stays in the center of the browser when the browser is resized, but now I am having trouble trying to place elements inside the boxes I create. When I create a box and put it inside my main layout box i give it a position as to where I want it to go, but when I go into the browser and resize the browser the box stays where it is, and doesn't move with the rest of the page. the same happens for the text i put inside boxes. I guess I'm not supposed to assign an absolute value to the boxes, but how else to I get it where I want it? It's driving me crazy!

this is my html:<body>
<div id="container">
<div class="box">
<h1>Silver City Food Co-op</h1>
<p1>520 North Bullard Street - Silver City - New Mexico - 88061 - Phone: 575-388-2343 - Monday-Saturday: 9am-7pm</p1></div>
<div class="box1"><p>The Silver City Food Co-op is a member owned full-line grocery store featuring natural, organic, and local foods, everyone can shop the Co-op, anyone can become part owner of the Co-op!</p></div>

<div class="box2"><div class="box3"><p2>Food News</p2></div></div>
</div>
</body>
</html>

this is my CSS

body{background-color: #69916D}
h1{color: #FFF; Font-family: Georgia, "Times New Roman", Times, serif; font-size: 46px; letter-spacing: 7px; font-weight: normal; margin: 0 0 0 130px}
p1{font: Arial, Helvetica, sans-serif; letter-spacing: 2px; font-size: 10px; color:#FFF; margins: 0 0 0 30px}
p{font: Arial, Helvetica, sans-serif; margin: 0 0 0 10px}

div.box {height: 150px; width:750px; border: 0px solid; border-color: #000; background-color: #166501}
div.box1 {height: auto; width: 750px; border: 1px solid black;background-color: #FFF; position: absolute; Top: 200px; z-index:2}
div.box2 {height: 500px; width:750px; border: 0px solid; border-color:#000; background-color: #FFF9F6; z-index: 1}
div.box3{height:auto; width: 200px; border:1px solid; border-color:#000; background-color: #FFF; position:absolute; top: 300px; left:152px}


body {
text-align: center;
}

#container {margin: 0 auto;
width: 750px; text-align: left
}

Thanks for the help!!

In this sample code, I would like the form to actually be positioned befor the things that follow it in the code, but I just can't figure out how to do this. The document I want to use it on will not be 100% CSS, and maybe even inside a table. How might this be done?

You can see the code in action HERE.

Code:

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

.input-box
{
	color: #26a;
	background: #feb;
	border: #26a solid 1px
}
#div1, #div2, #div3, #div4 
{
	padding: 10px;
	margin: 0 auto;
	overflow: auto;
	display: none;
	border 1px;
}
fieldset 
{
	position: absolute;
	left: 50%;
	margin-left: -100px;
	width: 200px;
	padding: 10px 10px 10px 10px;
}
search_label
{
width: 4em;
float: left;
text-align: right;
margin: 0 1em 10px 0;
clear: both
font-family: verdana,tahoma,arial,helvetica,sans-serif;
}
</style>
<script type="text/javascript">
//<![CDATA[
 
function change(which) {
    document.getElementById('div1').style.display = 'none';
    document.getElementById('div2').style.display = 'none';
    document.getElementById('div3').style.display = 'none';
		document.getElementById('div4').style.display = 'none';
    document.getElementById(which).style.display = 'block';
    }

//]]>
</script>
  </head>

  <body onload="change('div1');">
    <h1>Switch Divs</h1>
    		<form method="post" action="">		
		<fieldset>
		<legend>This is my form</legend>
		<label><input class="radios" checked type="radio" name="search_field" value="name" onclick="change('div1');" />Last Name</label><br />
		<label><input class="radios" type="radio" name="search_field" value="city" onclick="change('div2');" />City</label><br />
		<label><input class="radios" type="radio" name="search_field" value="state" onclick="change('div3');" />State</label><br />
		<label><input class="radios" type="radio" name="search_field" value="zip" onclick="change('div4');" />Zip Code</label><br />
		<div id="div1">
		<input class="input-box" type="text" name="search_name">
		</div>
		<div id="div2">
		<input class="input-box" type="text" name="search_city">
		</div>
		<div id="div3">
		<select name="search_state" size="1">
		</select>					
		</div>
		<div id="div4">
		<input class="input-box" type="text" name="search_zip">
		</div>
		<div><input type="submit"></div>
		</fieldset>
		</form>
		<p>Some Content</p>
		<table border="1" width="100%">
			<tr>
				<td>Some other Content</td>
			</tr>
		</table>
  </body>
</html>

Ok well the boss asked me to do a XHTML/CSS version of the website and get it up to snuff with web standards. Now I've done the coding to get the site to look the same in XHTML as it did before in HTML and tables... but there is one catch. I can't quite get my head around the easiest way to deal with captions underneath pictures. For example look at this page:

http://www.zeroonedesign.com/aboutus.html

Now in my version I haven't got the picture of the guys, or the "navigating our portfolio" bit.

Take a look at my version he

http://obelix.ca/zeroone/aboutus.html

I was thinking about creating little block divs and positioning them absolute on the page... but that doesn't seem like much of a solution as I could see the stylesheet growing considerably if there was a page with a lot of these pictures with captions. Any reccomendations? How do you guys do captions with pictures?

In the header section design, I have three parts. Menu; upper left, gallery; lower left and Logo right. So in my stylesheet, I created three parts. The problem I am having is logo is not centered as in the design (check the attachment). I could not figure why not. Looking for suggestions.

http://www.refinethetaste.com/AT/

I'm having trouble with creating a nav bar in css. The code I'm using is this for the html:

Code:

<div id="wrap"> 	<div id="nav"><a id="home" href="#" title="home"><span>home</span></a> 	</div> </div> <div id="bottom"></div> </div>

and this for the css:

Code:

@charset "utf-8"; /* CSS Document */ body { overflow:hidden; padding:0; border:0; margin-left:50%; color: #000000; line-height: 100%; font-family: verdana; font-size: 12px; text-indent: 0cm; background-image: url('bg.png'); background-position: top center; background-attachment: fixed; background-repeat:repeat-x;  }  #bottom { position:absolute; height:100%; width:100%; background-image:url('lbg.png'); background-position:bottom center; background-attachment:fixed; background-repeat:no-repeat; margin-left:-340px; }  #wrap { background-color: #FFFFFF; border-color: #660000;  border-style: double; position:absolute; width:900px; height:750px; margin-left:-450px; }  #nav { height:50px; }  #home {   display: block;   width: 226px;   height: 50px;   background: url("home.gif") no-repeat 0 0;  }  #home:hover {    background-position: 0 -50px; }  #home span {   display: none; }

The button shows up but only half the link works! And I have put in other bottons to the right of it and they don't work at all... can anyone help pls? thank you.

I have a 3 column layout: 1st -> 350px, 2nd -> 500px, 3rd -> remainder of containing div.

In the 2nd div, I have 15 pictures arranged to form the letter R, each picture is 100x100 px. I am not using absolute positioning.

I want the first and second column to have a background color of black that is 100% the height of the viewport. The middle column should have a white background and be 100% height. The problem is, the margins I am using for the pictures is throwing things off and I'm not sure how to fix it short of not arranging the pictures the way I want. Is there another way to arrange them to achieve the R shape?

Code:

<div id='container'>
     <div id='first'></div>
     <div id='second'>All of the images are loaded here.</div>
     <div id='third'></div>
</div>

Code:

#img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img11, #img12, #img13, #img14, #img15, #img16, #img17, #img18, #img19, #img20 {
	display: block;
	border: 3px solid #B8860B;
	width: 100px;
	height: 100px;
}
#img1, #img2, #img3, #img4, #img5 {
	margin-left: 10px;
}
#img1 {
	margin-top: 60px;
}
#img2 {
	margin-top: 10px;
}
#img3 {
	margin-top: 10px;
}
#img4 {
	margin-top: 10px;
}
#img5 {
	margin-top: 10px;
}
#img6 {
	margin-top: -590px;
	margin-left: 125px;
}
#img7 {
	margin-top: -136px;
	margin-left: 240px;
}
#img8 {
	margin-top: -76px;
	margin-left: 355px;
}
#img9 {
	margin-top: 10px;
	margin-left: 380px;
}
#img10 {
	margin-top: 10px;
	margin-left: 355px;
}
#img11 {
	margin-top: -87px;
	margin-left: 240px;
}
#img12 {
	margin-top: -125px;
	margin-left: 125px;
}
#img13 {
	margin-top: 30px;
	margin-left: 305px;
}
#img14 {
	margin-top: 10px;
	margin-left: 365px;
}

I've been developing a content management system, and one of the final things I have to clean up is a stylesheet problem involving the float property. I'm trying to position two boxes next to each other id: menu and id: content, but until I set the width property on content it would drop beneath menu. I want the content box to fill any remaining space to the right of the menu, with appropriate padding and spacing and such.

Can anyone help make suggestions as to the best way of achieving this?

Here is some of my css code which is also viewable on the website which is located at: 8< snip >8

Code:

#container 
{
	margin: 1em 4em 1em 4em;
	/* width: 750px;  dynamic width */
	text-align: left;
	background: #FFFFCC;
	border: 2px solid black;
}

#menu 
{
	float: left; 
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	font-family: Verdana;
	font-size: 12px;
	width: 150px;
	display: inline;
}

#content 
{
	float: right;
	width: 20em;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 0px;
	/* margin-left: 170px; */
	padding-top: 5px;
	padding-left: 20px;
	padding-bottom: 20px;
	border-left: 2px solid black;
	height: 100%;
}

Thanks for trying to help, I've been getting really frustrated trying to get css to work in both ie and firefox.

BTW: I've been finding the Web Developer firefox extension very helpful for this kind of work.

Hello! I'm hoping someone can help me out here. I'm sure it's something simple I'm overlooking, but I've trialed-and-errored it enough and it's time to seek help!

I'm trying to adjust the location of the "main menu" on this page he

http://www.jeditemplearchives.com/hasbrodb/welcome.php

Currently, it is set in reference to the side of the browser in this CSS code:

Code:

.menuContainer
{
	position: absolute;
	top:113px;
	right:210px;
	margin: 10px;
	margin-top: 50px;

}

I've tried making the position relative but it really whacks out the page when I do that. I want to make it relative to the border of the content so that no matter what size resolution or if the browser is minimized it stays fixed and doesn't float left. I was able to do this to the links directly above it, but the same thing doesn't seem to work for this. Here's the code for the 'advanced' and 'login' links:

Code:

#header ul.headerLinks
{
	list-style-type: none;
	margin: 0px;
	padding: 10px;
	position: absolute;
	right: 0px;
	top: 95px;
	white-space: nowrap;
}

Thanks for any suggestions anyone comes up with!

I have a problem that I've been wrestling for the past hour and a half, and I've come to the conclusion that I will most likely never solve it on my own, so here I am.

I have a header area of a website. It has a logo(basically the name of the website in a fancy font). The logo is in the bottom-left area of the header.

I also have a banner. This banner can be anywhere from 468x60 to 728x90 pixels in dimension, depending on user input from a back end.

I want the banner positioned near the bottom-right of the header, with a bit of space in between it and the right edge of the browser window.

I'm having a lot of trouble accounting for the varying banner sizes. I can't use margins and floats to position the banners because the banner image size changes, therfore I thought it would be a good idea to use absolute positioning (relative to the header). This works perfectly, except when I resize the window, the banner overlaps the logo image. So, I guess I can't use absolute positioning.

My HTML is:

Code:

<body>
	<div id="header">
			
		<div id="header_ads">
		<?php display_banner() ?>
		</div>
			<h1 id="heading"><span class="invisible">This is the heading</span></h1>
	</div>
</body>

My CSS is:
Code:

* {margin:0;padding:0;}

body {width:100%}

.invisible {visibility:hidden;}

/*Header*/
#header {margin-bottom:3em;background-color:rgb(80, 80, 82);padding:0 0 0.2em 0;height:8em;width:100%;position:relative;}

#header #heading {background:url("../images/logo.jpg") no-repeat;height:70px;width:400px;position:absolute;top:1.6em;left:1em}

#header_ads {float:right;margin-top:-1.5em;margin-right:1em;position:absolute;bottom:0.3em;right:4em}

The above CSS/HTML yields the exact desired result, but does strange things when the browser window is resized...

I would greatly appreciate any help!

I've just been given the assignment to write a script that given a set of form elements by the user it will create a page with those form elements displayed and a submit button on the bottom. The form elements the user defines can be text fields, text areas, dropdown boxes, option groups, and checkboxes. The user also gives me a title for each form element. He can give me these form elements in any order and I need to display them in that order on the page.

My question is, how do I arrange these form elements so they always look good together and I don't have funny gaps or unprofessional looking design? It would be easy if it was just text fields and area, but then I have to throw in option groups and checkboxes that can be any number in a row.

Does anyone have some good form organization rules that could help me?

Thanks!!