trouble positioning div...

rrmcguire · Apr 15, 2011

Hello at

http://www.meadowlarkco.com/newCSS7.html

I have a div called addociationscontent which Im trying to position so its at the bottom of the news/events section and to the right of the about our company, but when I shrink my page in IE or Firefox, Safari, the div doesn't stay in place....below I've attached my code. I initially tried sticking it within another div and another ad div but doesn't seem to work..any help would be appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="

http://www.w3.org/1999/xhtml">

<head>
<style type="text/css"

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meadow Lark Agency</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body background="images/test background.png">
<div id="navigation">
<div id="container2">
<p><a href="

http://www.meadowlarkco.com/equipmentlisting.htm">List

Your Equipment</a> <a href="

http://www.meadowlarkco.com/online_quote_request.htm">Online

Quote Request</a> <a href="

http://66.212.144.26/CarrierConnect/">Web

Booking</a> <a href="

http://66.212.144.26/CarrierConnect/default.aspx?cust=id_015&app=cc">Available

Loads</a> <a href="

http://66.212.144.26/WebTrace/Login.aspx?ReturnUrl=/webtrace/webtrace.aspx">Online

Services</a> <a href="

http://www.meadowlarkco.com/documentation.htm">Documents/Downloads</a>

<div id="social"><a href="

http://www.facebook.com/meadowlarkagency1"

target="_blank"><img src="images/facebooksmall.jpg" width="15" height="15" alt="meadow facebook" /></a> <a href="

http://twitter.com/meadowlarkco"

target="_blank"><img src="images/twitter.jpg" width="15" height="15" alt="meadow twitter" /></a></div social>
</div container2>
<div id="container">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Services</a>
<ul>
<li><a class="MenuBarItemHover" href="#">Flatbed</a></li>
<li><a class="MenuBarItemHover" href="#">Van</a></li>
<li><a class="MenuBarItemHover" href="#">Heavy Haul</a></li>
<li><a class="MenuBarItemHover" href="#">Global</a></li>
<li><a class="MenuBarItemHover" href="#">LTL</a></li>
<li><a class="MenuBarItemHover" href="#">Cross Border</a></li>
</ul>
<li><a href="#">Customers</a>
</li>
<li><a href="#">Logistics</a></li>
<li><a href="#">Agents</a></li>
<li><a href="#">Contractors</a></li>
<li><a href="#">Logistics</a></li></ul>
</div container>

</div navigation>
<div id="banner">
<div id="bannertext">
<p> </p>
<p>A FRESH NEW LOOK AT TRANSPORTATION</p>
</div bannertext>
<div id="bannertext2"> "No Bad Deals"</div bannertext2>
<div id="bannertext3">
<h2 class="bold">Welcome to Our Website </h2>
<p>With over two decades of service, Meadow Lark has offered innovative solutions to any transportation need with on-demand operation services and advanced technology. Customers, Contractors, and agents alike benefit from association with our company. Family owned and operated, Meadow Lark is the premier choice for your shipping requirements.</p>
<p> </p>
</div bannertext3>
</div banner>
<div id="content">
<div id="newsevents">
<div id="apDiv2">
<div id="associationscontent"></div associationscontent>
</div apDiv2>
<div id="apDiv1">
<div id="newsswf">
<object classid="clsid

27CDB6E-AE6D-11cf-96B8-444553540000" width="410" height="278" id="FlashID" title="news">
<param name="movie" value="scrollingnews_new_2.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />

<param name="expressinstall" value="Scripts/expressInstall.swf" />


<object type="application/x-shockwave-flash" data="scrollingnews_new_2.swf" width="410" height="278">

<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />

<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="

http://www.adobe.com/go/getflashplayer"><img

src="

http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"

alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>

</object>

</object>
</div>
</div>
</div newsevents>
<div id="contentcompany">About Our Company
<h5>Mission Statement</h5>

<div id="equipavail">
<div id="equipavailtext">HAVE AVAILABLE EQUIPMENT YOU NEED LOADS FOR? LET US LOAD YOUR TRUCKS WITH OUR FREIGHT TODAY!! PLEASE CALL OR EMAIL YOUR AVAILABLE TRUCK LIST TO: 406-237-0811 OR equipmentavailable@meadowlarkco.com</div equipavailtext>
</div equipavail>
<div id="missionstatement">
<ul>
<li>No Bad deals. All players benefit from association with our company.</li>
<li>We are constantly in pursuit of excellence in our image and operations</li>
<li>We do not compare ourselves to any other business, only to how WE were yesterday.</li>
<li>Our Word is our bond.</li>
</ul>
</div mission>

<div id="support_text"><strong>SUPPORT</strong> CENTER<BR /> 24 Hours / 7 days a Week<br />
1-800-736-5233</div>
<div id="transportationserv">Transportation Services</div>

<div id="dropdown">
<form id="form1" name="form1" method="post" action="">
<label>
<select name="maindropdown" id="maindropdown">
<option>..open for online services</option>
<option value="index.htm">Home</option>
<option value="flatbedservices.htm">Flatbed Services</option>
<option value="vanservices.htm">Van Services</option>
<option value="heavyhaulservices.htm">Heavy Haul Services</option>
<option value="globalservices.htm">Global Services</option>
<option value="ltlservices.htm">LTL Services</option>
<option value="crossborderservices.htm">Cross Border Services</option>
</select>
</label>
<label>
<input type="submit" name="Go" id="Go" value="Go" />
</label>
</form>
</div>
</div contentcompany></div content>
<div id="footer"></div footer>
<script type="text/javascript">

</script>
</body>
</html>

audiopro · Apr 16, 2011

The is a lot of code there for what is a simple page. I see no reason for any absolute positioning on the page, so why not just create a container for the page and let the content lie naturally in it.
You have a number of validation errors which may or may not be contributing to the overall problem.

Keith

http://www.studiosoft.co.uk

rrmcguire · Apr 16, 2011

So, for a container just make a div with the appropriate width and height with everything else contained within it? I should then be able to remove any absolute positioning?

audiopro · Apr 16, 2011

Yes, make a container the required width and float it left. Doing that forces the height to expand to fit it's contents. You may have to put containers within containers if your site has 'columns'.
It is usually easier to plan the divs on paper first although to do that, you need to know what the finished page looks like, you don't normally know that until the page is finished.

Keith

http://www.studiosoft.co.uk

rrmcguire · Apr 16, 2011

Can this be done without eliminating everything I currently have? Basically I'm trying to mimic

http://www.meadowlarkco.com,

but making the text on the page selectable rather than being embedded in inages. Also, with the divs which are within my container, I'll have my navigation,banner,and the content within it, but should the rules of those divs applied to just themselves or inherit anything from the container. Also, is it possible to have a div on top of another as at

http://www.meadowlarkco.com

the section which says associations on top of what is behind it......thanks for all the advice

audiopro · Apr 16, 2011

Can this be done without eliminating everything I currently have?

What you have is fine, your problems lie in the way the pages are put together.
I have a few suggestions.
Use an external style sheet so your styles are site wide, rather than bloating every page, also makes site wide changes easier.
Using text for the words is definately the way to go as in terms of SEO, images are nothing of note. The menu, being Flash will not be followed by SEO crawlers either, meaning your inner pages will not be indexed.
The menu should be replaced by a line of hyperlinks making the whole site indexable. That way you could lose the duplicate menu in the footer jone and raplace it with appropriate images.

Your services link is the only one with multiple options and would be better linked to a services page, which shows all the various options, with images, on one page.

Make use of the 'background-image' property of divs. That way you can keep the sexy pictures but overlay real text on top. Position the text using padding and don't be tempted to use absolute positioning.

Youe shouldn't need to stack divs for what you have there.

Keith

http://www.studiosoft.co.uk

rrmcguire · Apr 17, 2011

To begin I'm just trying to recreate the main page at

http://www.meadowlarkco.com,

then after that do all of the subsequent pages. So should I just create another container as I already have one namesd container and call it main container and wrap it around everything and set the properties of the rule as you suggested? Also should this be a class or and ID? Is the difference just reusability? The page I'm doing this on is

http://www.meadowlarkco.com/newCSS7.html

just trying to look exactly like what is at

http://www.meadowlarkco.com

audiopro · Apr 17, 2011

If a div is only used once, it can be an ID but if a div is used more than once it has to be a class. I tend to make them all classes to save confusion later, not sure if there is a downside to that method but I haven't encountered one yet.

I would just start the page and CSS all over again and use the use the old page as a visual guide. You will be surprised how little code you need to create the whole page.
You should be able to create the whole page with around 12 divs.

A FRESH NEW LOOK AT TRANSPORTATION
should be in header tags (<h1></h1>)

Keith

http://www.studiosoft.co.uk

rrmcguire · Apr 17, 2011

Yeah,

http://www.meadowlarkco.com

is just my reference. So, my container for the whole page would work the same as the current container divs I have, more or less? Also what does floating left accomplish? Would all the divs within the main container not inherit anything from the other divs? Thanks for your help with this....starting over doing the site is right the to do just completely different than when I had a bunch of tables...thanks again

audiopro · Apr 17, 2011

Set the whole style up in the main container, including the hyperlinks so that your links are constant throughout the site. The inner divs will inherit all of the container div's properties so the inner divs only need dimension or specific styling information in the style sheet.

Floating left forces the content of the div to remain inside the div's boundaries, a bit of a historic throw back to when style sheets were being developed and various browsers interpreted the standards in different ways.

Floating is also useful when an image shares a div with text, the text can be forced to wrap around the image which is very useful on dynamic sites where the amount of text varies.

Keith

http://www.studiosoft.co.uk

rrmcguire · Apr 17, 2011

With my spry menu would that just go within a div class the way I have it now as an example, #navigation....thanks

rrmcguire · Apr 17, 2011

So I setup my container with width 900 and float left, but I always want everything on my page centered on the screen...do I set my margin to auto? Also, then when inserting the div tag and selecting class are all the classes, for instance banner,content, footer, etc. rules like this .banner, .content, or .container.banner, .container.content, are these setup as class or compound is basically what I'm asking.....thanks again for all the assistance

audiopro · Apr 17, 2011

There are many ways of centering content out there, some simple some very complicated. I always use

Code:

<body title='Name of the Page' style='width:1000px; margin:0px auto;'>

which does the trick for me - keep it simple.

Give the class names something meaningful and there is no need to nest the description so your style sheet looks like:-

Code:

.pagecontainer{
   xxxxxxxxxx
}
.header{
   xxxxxxxxxx
}
.fullwidth{
   xxxxxxxxxxx
}

Keith

http://www.studiosoft.co.uk

rrmcguire · Apr 17, 2011

So all the CSS rules will only apply to their specific div tag?

vacunita · Apr 17, 2011

Floating left forces the content of the div to remain inside the div's boundaries, a bit of a historic throw back to when style sheets were being developed and various browsers interpreted the standards in different ways.

I disagree with that. Floating removes elements from the normal document flow, it also makes them operationally inline elements which may not be desirable It also forces them in one direction in relation to their container.

floating everything because it makes it wrap around its content is like using positioning everywhere because its easy. If you want it to wrap use the overflow style, or a element with a clearing style.

You might not need or want things floated always, you may require them to be centered and solid.

The first step to building websites is to understand what elements
are and what stylings do.

Div's are like boxes. as such they are blocks. They have a line end before and after them. So without any styling they'll sit alone on a line. Should you need something else next to them then floating is suggested.

You may not be able to overlay some of the things as they are in your base page, but overall it should provide a cleaner look. I find it kind of distracting to have the yellow box overlapping the left side content. Or the green left section overlapping your splash image.

If I was building this, I'd start with a rough skeleton of the page. 6 divs should be enough. 1 to wrap, and 5 for layout.

Only 4 are actually floated, and none are positioned.
I floated the section divs right inside the menu div.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL] 

<html>

<head>

<title></title>

<style type="text/css">

#wrapper{

width:800px;

margin-left:auto;

margin-right:auto;

}



#menu{

background-color:#acac93;

overflow:hidden;

}



#menu #top{

height:40px;

float:right;

line-height:40px;

width:300px;

}



#menu #spry{

height:40px;

clear:both;

float:right;

line-height:40px;

border-top:1px solid gray;

width:300px;

}



#splash{

height:400px;

background-color:#686898;

}



#content{

height:400px;

overflow:hidden;

}



#about{

float:left;

background-color:#789978;

width:400px;

height:100%;

}



#news{

border:2px solid gray;

foat:right;

width:800px;

height:100%;

}

</style>

</head>

<body>

<div id="wrapper">

<div id="menu"><div id="top">Top Menu with Social Links here or something</div><div id="spry">Main menu or spry menu here</div></div>

<div id="splash">Splash Image</div>

<div id="content">

<div id="about"><h1>About Us</h1></div>

<div id="news"><h1>News and Events</h1></div>

</div>



<div>

</body>

</html>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

audiopro · Apr 17, 2011

Nested divs will inherit their container's properties

Keith

http://www.studiosoft.co.uk

audiopro · Apr 17, 2011

Phil
I remember spending hours with the old clearfix routine and various other dodgy work rounds and still content would wander out of bounds. Since floating divs with varying content, I haven't once had content dropping out of the bottom.

What is an element with a clearing style?

Keith

http://www.studiosoft.co.uk

rrmcguire · Apr 17, 2011

Vacunita....so the wrapper is a class? Are all of those classes and that accomplishes everything the same as the container as mentioned previously?

Thanks

vacunita · Apr 17, 2011

Actually I gave them all ID's not classes. But it works the same either way.

The class is just meant to apply a specific style to any element with that class.

The Id does the same, but is applied to a single element only, as IDs must be unique.

Code:

.myclass{
color:red;
}

The above would make any element with a class of myclass have red text. i.e:

Code:

<div class="myclass">Text here</div>
<h1 class="myclass">Text here</h1>
<span class="myclass">Text here</span>

@audiopro
Not clearfix, simply a clear:both style.

audiopro said:
Nested divs will inherit their container's properties

True for the most part, there are some properties like float that will not be inherited.

audiopro said:
I remember spending hours with the old clearfix routine and various other dodgy work rounds and still content would wander out of bounds. Since floating divs with varying content, I haven't once had content dropping out of the bottom.

What is an element with a clearing style?

While its true that they will wrap around content, again I say, you may not want a floated div always just so it wraps.

Any element with a style that includes the clear property set to clear the previous element's float direction or to clear both directions.

Code:

<p style="clear:both">

However using overflow set to anything (other than none) works in much the same way.
I prefer setting it to hidden, as you don't have the risk of getting a scrollbar.

Notice my above code, and see how menu wraps around both of the inner divs simply by using an overflow:hidden.

As does the content div further down.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

vacunita · Apr 17, 2011

One thing that should be mentioned when floating, is that elements will only float side by side as long as there is enough room.

If you have a container div that is 800px wide and you have 2 floated divs inside their combined width cannot be more than 800px.

This includes the actual width, borders, padding, and margin, as they all add to the overall dimensions of the div.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

trouble positioning div...

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor