?
Solved

Top div not holding hieght, div not following normal flow

Posted on 2005-03-03
2
Medium Priority
?
203 Views
Last Modified: 2006-11-17
The top div has a set height at 20px the nested divs have a set hight of 15px but the top div changes its heigh to around 50 to 60px.  I'm trying to get the nested divs to line up from left to right and not on top of each other.  Should't the divs line up from left to right automaticly?  Not sure on what i'm doing wrong here?
Thank you for the help.
on to the code:

#TopLinks
{
width:644px;
height:20px;
font-size:15px;
border-bottom: solid 1px #a1af9b;
border-right: solid 1px #a1af9b;
background-color:#172455;
position:static;
}

#AboutUs
{
width:50px;
height:15px;
background-color:#be6900;
position:relative;
bottom:-3px;
border:solid 3px white;
z-index:auto;
}

#Products
{
width:50px;
height:15px;
background-color:#be6900;
position:relative;
top:-14px;
left:50px;
z-index:auto;
}

#Contact
{
width:50px;
height:15px;
background-color:#be6900;
position:relative;
top:-31px;
left:100px;
z-index:auto;
}

HTML
 <form id="Form1" method="post" runat="server">
            <div id="Contain">

                         
                  <div id="TopLinks">
                         <div id="AboutUs">
                         </div>
                         <div id="Products">
                         </div>
                         <div id="Contact">
                         </div>
                  </div>
                         

        </div>

thanks again,
jt
0
Comment
Question by:jbtipps
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 13

Accepted Solution

by:
StormyWaters earned 500 total points
ID: 13455027
You shouldn't be using positioning  at all from what I understand of this problem. From what I see, you have three divs with a width of 50 and a height of 15, right?

.smallbox {
  border:1px solid green; /* for demonstration. */
  background-color:black; /* demonstration */
  color:white;            /* ditto */
  float:left;
  font-size:smaller;
  width:50px;
  height:15px;
  margin-left:15px; /* Get rid of this or change it for the spacing between the divs.*/
}

<div class="smallbox">Bing</div>
<div class="smallbox">Bong</div>
<div class="smallbox">Wibble</div>

However, the use of this depends entirely on the context of the page and elements in question. From my point of view, you're quite likely using entirely the wrong tag for the job, but without seeing a link or code I can't tell.
0
 

Author Comment

by:jbtipps
ID: 13455098
ooo crap, thats way easier, Thanks! It works just like I wanted it to.
Thanks again!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

718 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question