CSS - Div Container Content Positioning

I'm trying to add "shadow" (which is in fact, an image) effect behind the border of my "centerContent" (i.e. the area where the main description text lies).

Presently looking page can be seen on:

http://allinclusivewebdesign.byetho...esign/about.php

The related CSS code is:

Code:

#centerContentContainer
{
	width:100%;
}

#centerContentShadow
{
	background:url(content-shadow.jpg) #FFFFFF;
	width:760px;
	float:left;
}

#centerContent
{
	background:url(contentbackground.jpg) #FFFF00;
	color:black;
	text-align:center;
	position:relative;
	width:700px; 
	margin-left:30px;
	float:left;
	border-left:1px solid #999999;
	border-right:1px solid #999999;
}

And to display it within each html files, I've got:

Code:

<div id="centerContentContainer">
<div id="centerContentShadow">
<div id="centerContent">

Now, the problem is, it looks differently in my Firefox & Internet Explorer browser. In Firefox it displays perfectly well (except the "bottomMenu"), as it can be seen from:

http://allinclusivewebdesign.byetho...esign/about.php

while in Internet Explorer this "centerContent" drags down.

In addition, in Firefox AND Internet Explorer, my "bottomMenu"'s width gets change to the same width as the "centerContent" itself rather than the 100% width, as it was displaying earlier (http://allinclusivewebdesign.byetho...esign/about.php)

I wonder if anyone around could possibly point me in the right direction to get the desired output, since all I want is just the shadow image displaying behind the "centerContent" i.e. around the left & right border.

Hi,

I had a little problem with this design earlier, and a kind soul on the forum helped me by showing me a template to use (instead of all the absolute positioning i was using), but i've got one little issue, and it's all that's stopping my site from going live. You'll see it quite clearly, my "content" gets pushed under my "menu" - fnb4wd.com.au/4x4wh/help/category1_1.htm is the URL.

Any advice would be greatly appreciated.

Thanks in advance.

Hi all,

I'm not a n00b with CSS, but I'm no expert, either. I am making a test page at http://www.bartlett-family.net/test/

In IE, it looks pretty much like I WANT it to. In Mozilla and Opera, it looks all messed up( you'll see for yourself).

Basically, I would like the globe logo, the GFS image text, and the footer bar vertically lined up and centered (pretty much like it is right now in IE). However, I am obviously doing something wrong because it is not right in other, proper browsers.

I've been playing with it for a while and just can't figure it out. Any help would be most appreciated. TIA!

Chris

Hey there,

im not good with CSS, just know some basics so looking for some help here...

I see on some sites, in their source code, the menu appears at the near bottom of the source code page, but when the page is viewed in the browser.. the menu is rendered as been placed before all the other contents. how is this possible? I thought the browser reads line by line and renders accordingly...

actually.. what I want to do is place the source code of something at the top of the page, but when rendered, I want it to appear near the bottom.. is this possible?

Thanks in advance and sorry if the question confused you or sound stupid

When this design was originally built-out, there were no set requirements on how the CMS behind the design would function. As the project has progressed, some of those requirements have started to trickle down and a some of them are getting pretty ridiculous.

This is loosely the code I'm working with.

Code:

<div id="primaryContent">

  <div class="primaryModule"> Content </div>
  <div class="primaryModule"> Content </div>

  <div class="tertiaryModule"> Side Content </div>
  <div class="tertiaryModule"> Side Content </div>

</div> <!-- end primaryContent -->

And the accompanying CSS
Code:

.threeColumn #primaryContent,
#primaryContent.threeColumn {
    float:left;
    margin-left:6px;
    padding:7px 10px 20px 22px;
    width:732px;
}
#primaryContent .primaryModule,
.primaryModule.primaryContent {
    margin:0 300px 2em 0;
    position:relative;
    width:514px;
}
#primaryContent .tertiaryModule,
.threeColumn .tertiaryModule {
    float:right;
    margin:0 0 2em 531px;
    padding:0 11px 0 12px;
    position:relative;
    width:178px;
}

I have attached a picture of what the desired display is. The vertical gray bar is a background image of a div higher up in the code.

Originally, the XHTML and CSS were very well thought out, but as the requirements came through for the CMS, the XHTML had to go out the window. Now, everything in #primaryContent is handled by the CMS. Each module can have it's own class or ID to have styles applied to it, but no additional divs can be put in to sort the side content from the main content. Furthermore, the order of the divs can shift every time the user refreshes the page - there's no telling in what order div.primaryModule or div.tertiaryModule may come in.

Awesome!

I was able to get this displaying correctly in IE6 and IE7 using the following styles:
Code:

#primaryContent .primaryModule,
.primaryModule.primaryContent{
	position:relative;
	float:left;
	clear:left;
	width:514px;
	margin:0 0 2em;
}
#primaryContent .tertiaryModule,
.threeColumn .tertiaryModule{
	width:178px;
	padding:0 11px 0 12px;
	clear:right;
	float:right;
	position:relative;
	margin:0 0 2em;
}

But I keep running into clearing and floating issues in FF3. The only way I can get the layout functioning correctly in FF3 is if I know that the .primaryModule divs come before the .tertiaryModule divs (or vice versa).

Any thoughts? Thanks for your help.

Hi there

im fairly noob to css and I cant figure out how to do this, or if its at all possible?

please take a look at:

http://www.freelayouts.us/css/page2.html

this page display just fine, and the html code flows like this:
- header
- left column
- right column
- content
- footer

but what i want to do is make the source code flow like this:
- header
- content
- left column
- right column
- footer

BUT still display just like the above page.. is this possible?

here is what happens when I reposition the source code:

http://www.freelayouts.us/css/page1.html

is there anything I can do to the CSS that will make it appear like the first example but the source code flows like my 2nd example?

hope i didnt confuse you...

thanks in advance

Hi,

I not very good at CSS and I need to create a page that shows divs in other order that are in the script:

in my page i want to be something like this:

Code:

<body id="body" > 
   <div id="bodyHolder" > 
      <div id="mainHolder" > 
          <div id="mainColumn">Here will be the main content</div> 
         <div id="leftColumn" > Left Column</div>
      </div> 
      <div id="topLogoHolder">Site Logo</div>
      <div id="topMenuHolder" > Top Menu</div > 
   </div>
   <div id="footerHolder"> Footer</div>
</div>

but I want to show:

Site Logo, Top Menu, Left Column, Main Column, Footer

My problem is with Footer. I can't get to position at the bottom of page (not at the window) because the Main Column is not fixed.

The CSS code is :

Code:

body {margin:auto; background:url('../imgs/bg.body.jpg') repeat-x; font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color: #FFFFFF;}
#bodyHolder {margin:auto; width:1006px; text-align:left;} 
#mainHolder {width:1006px; text-align:left; display:block; float:left; clear:both; background-color:#FFFFFF; margin:0px; padding:15px 0px 15px 0px; position:absolute; top:150px;}
#mainColumn {text-align:left; display:block; float:right; margin-right:10px;  width:810px;} 
#leftColumn {text-align:left; display:block; float:left; width:180px; } 
#topLogoHolder {width:1000px; text-align:left; display:inline; margin-left:6px; float:left; clear:both; height:112px; position:absolute; top:0px;}
#topMenuHolder { text-align:left; display:block; margin:0px 0px 0px 6px; padding:0px; background:url('../imgs/bg.top_menu.jpg') no-repeat; width:1000px; height:38px;position:absolute; top:112px;}
#footerHolder {margin:auto; background:url('../imgs/bg.footer.jpg') repeat-x; height:234px; font-family:Arial, Helvetica, sans-serif; padding:0px;width:100%; display: block;  position: absolute; bottom:0px; height:100%; clear:both;}

I really don't what to try (google gives me no clue... all my attempts failed )

I'll appreciate any help! Thanks a lot in advance

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 relatively new to using CSS as the foundation of a site, as i've only ever built sites for family/work etc using tables. I have used it previously for styling and so on, but not as intensively as i now am. It's great, but a couple of issues are giving me a headache - the fun of web design, hey?...

I'm experiencing two problems, and have spent a lot of time describing them (with examples and images) on the following page - fnb4wd.com.au/4x4wh/help/help.htm - not wanting to clutter up the forum with my explanations and too many images.

The first is to do with the 100% height trick - my "wrapper" div is not expanding with my "content" div - but i do not believe faux columns are possible for my design (if someone proves me wrong, great!) as i don't have two full height columns, but one content column and a vertical menu div...

The second issues is with a Horizontal menu i am using as main navigation. In both FireFox & Chrome, the menu shifts down so the text links are unreadable unless hovered over. In IE, it's positioned as i want (with Comp View Settings turned on for IE8).

So, if anyone could shed come light on my problems, i'd love to hear some ideas.

The full explanation, complete with working examples and images (as well as my code) can be seen at fnb4wd.com.au/4x4wh/help/help.htm.

Thanks in advance,

Azerus85

Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right.

To simplify my problem, look at this example.
Code:

<html>
  <body>
    <div style="float:right">
      Hello there!
    </div>
    <hr>    
  </body> 
</html>

If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly.

It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so:

Code:

<html>
  <body>
    <div style="border: 1px solid #000; ">
      <div style="float:right">
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
      </div>
      <div style="clear: both"></div>
    </div>
    <hr>    
  </body> 
</html>

Am I missing something fundamental here? Is there a better solution? Thanks in advance.

hi, i have a container div, set at 50% opacity.

i want my content to apear in here, but be 100% opacity.

i thought this would work, but it doesn't... any help?

#transContainer {
background-color: #FFF;
margin-left: auto;
margin-right: auto;
width: 982px;
padding: 7px;
height: 100%;
padding-top: 0;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;


}

#mainContainer {
background-color: #ccc;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
width: 968px;
height: 94%;
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity: 1.0;

}

Hi There -

Have a simple container div containing two other divs, top and content.

My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know.

Any help you can give me would be greatly appreciated. Thanks!

Code:

<body>

<div class="colorbox">

  <div class="colorboxtop">
    <h2>title goes here</h2>
  </div><!-- /colorboxtop -->

  <div class="boxcontent">
    <p>You should read this and <a href="#">Click Here</a>.</p>
    <a title="Go Here!" href="#">[button]</a>
  </div><!-- /boxcontent -->

</div><!-- /colorbox -->

</body>

No great complexity there...here's the CSS:

Code:

body {
	color:#666666;
	font-family:Lucida Grande,Verdana,sans;
	font-size:10px;
	font-size-adjust:none;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:13px;
}

.colorbox {
	margin-bottom:9px;
	padding-bottom:15px;
	width:300px;
	border:thin solid #CCCCCC;
}

.colorbox h2 {
	color:#FFCC33;
}

.colorbox {
	color:#CC6633;
	padding:0px 20px 15px;
	margin-top:0;
	margin-bottom:10px;
}

.colorboxtop {
	background-color: #dddddd;
	height:50px;
	color:#666666;
	background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
	padding:auto 20px;
}

.colorbox a {
	color:#C5DBE9;
	font-weight:bold;
	text-decoration:none;
}

Hi,

My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner).

Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page.

I have tried various approaches and read up on positioning but so far have not been able to do it using css.

Any help is much appreciated.

Jim

Hello there, first post, just need a quick fix. Hope you don't mind.

So I'm trying to make myself a new portfolio site, but there's this 'error' I can't seem to fix...

(Can't post a link in my first post, so just copy/paste "hellspike.thanez.org/newsite" in the addybar.)

Basically that 150*300 infobar is supposed to be right next to the image, but it always ends up above or below the container.

<!--AK47-->
<div id="imgcont0">
<div id="imgcont1"><img src="images/ak47/1.jpg"></div>
<div id="imgcont2"><img src="images/ak47/info.jpg"></div>
</div>
<!--/AK47-->

imgcont0 is a 825*300 container, in which imcont1 (render) and 2 (infobar) are supposed to be.

Stylesheet:

#imgcont0 {
width: 825px;
height: 300px;
margin-left: auto;
margin-right: auto;
}

#imgcont1 {
width: 650px;
}

#imgcont2 {
margin-left: 675px;
width: 150px;
}

As you see the code is simple, yet I can't seem to fix this problem. Ideas?