CSS - Float Image Centered Over Div Edge. Layout Help

Hi everyone!

i have this mockup in fireworks for my personal site..
problem is... i cant put it together the way i like it using CSS

here is my mockup and the slices ive made...

http://www[dot]phpugph[dot]com/talk/index.php?action=dlattach;topic=8005.0;attach=1720;image

im sorry for the link... i cant seem to post a proper one

do u guys know how i should go about it?

the middle column should be fixed width but the right and left column should be fluid

thanx

Trying to delete my post but no option to delete so just removing content.

Hi,
Is it possible to make the following
"LEFT MENU" sits on left side and "RIGHT MENU" on right side

without using "float" ?

<div id="menu">
<div>LEFT MENU</div>';
<div>RIGHT MENU</div>
</div>
Thank you.

I am having some trouble using float to align containers on my page. Here is what it looks like.

http://filebox.vt.edu/users/kfalcon...less_broken.JPG

In this image the blue area is the "content" id, the red area is the "rostercontainer" and the cream color is the "profilecontainer". I would like the profilecontainers to appear in two columns instead of one as in this image. The problem is when i add 'float : left' to the profilecontainer or rostercontainer I get the following:

http://filebox.vt.edu/users/kfalcon...scrn_broken.JPG

The two profile containers are now next to each other, but the rostercontainer seems to be missing, and the profilecontainers are not being loaded into the content area.

From the index.php page i am using javascript to load the roster.php page into the content area.
Code:

<div id="main-nav">
    <dl>
        <dt id="roster"><a class="loadinto-content" href="roster.php">Roster</a></dt>
    </dl>
</div>

<div id="content">
    <h2>Main Page</h2>
</div>

The roster.php page looks like this:
PHP Code:
<div class="rostercontainer"> 
<?php
    // Go through all profiles
    while($profile = mysql_fetch_assoc($profiles)) {
?>

<div class="profilecontainer">

          <img src="image3.gif" class="floatLeft" width="150" height="115"
              alt="image 3" />
        <strong><h3 class="profile"><?php echo $profile['name']; ?></h3></strong><br/>
        <?php echo $profile['active']; ?><br/>
        <?php echo $profile['status']; ?><br/>
        <?php echo $profile['ride']; ?><br/>
        <?php echo $profile['major']; ?><br/>
        <?php echo $profile['hometown']; ?><br/>
        <?php echo $profile['info']; ?><br/>
        <div class="editlink">
            <a href="roster_admin.php?idx=<?php echo $profile['id']; ?>">edit</a>
        </div>
</div>

<?php } ?>
</div> 





And here is my css file, ive only included the important parts.
Code:

#page-container {
	width: 760px;
	margin: auto;
}

#content {
	font-family: Tahoma, Arial, Helvetica, Sans-serif;
	background: blue;
	border-top: 1px solid #efefef;
	padding: 25px;
}
div.profilecontainer {
	position: relative;
	width: 325px;
	height:200px;
	margin: 10px;
	padding: 5px;
	background-color: #ffe;
	border: 1px dashed black;
}
div#content div.rostercontainer {
	background-color:red;
	float : left;
}

I am not sure if this is a CSS issue or some problem with the javascript library(HTMLHttpRequest) i am using to load pages into my content area. It is really odd the adding the float to the roster/profile container would cause such a behavior. Any ideas on how i can fix this?

Thanks for any help,
Karl

I'm having trouble with a table layout I'm trying to convert to a float layout

my attempt so far is as follows

Code:

--loop--
lfloat{
float:left
}
boatLeft{
width:100px;
}
#cls# gets replaced with a class that only sets the background for odd and even rows.
	<div class="lfloat boatLeft #cls#" style="border-right:1px solid black;height:150px;">
		<a href="javascript:void(0);" onclick="displayVessel(#rssearch.YSNNUM#);">View Details*<br />
			<img id="thumb#currentrow#" style="border-color:white;width:100px;" src="#getpic.thumbpicname#" alt="#boatname#" />
		</a>
	</div>   
	<div class="#cls#">
		<div class="boatLeft lfloat">
			<strong>Boatname</strong>
		</div>
		<div>
			<strong>#BOATNAME#</strong>
		</div>
		<div class="clear"></div>
		<div class="boatLeft lfloat">
			LOA 
		</div>
		<div>
			#loam#m / #loaft#' #val(loain)#"
		</div>
		<div class="clear"></div>
		<div class="boatLeft lfloat">
			Builder
		</div>
		<div>
			#MFGNAME#
		</div>
		<div class="clear"></div>
		<div class="boatLeft lfloat">
			Naval Architect
		</div>
		<div>
			#hulldsnr#
		</div>
		<div class="clear"></div>
		<div class="boatLeft lfloat">
			Designer
		</div>
		<div>
			#designer#
		</div>
		<div class="clear"></div>
		<div class="boatLeft lfloat">
			Decorator
		</div>
		<div>
			#decorator#
		</div>
		<div class="clear"></div>
		<div class="boatLeft lfloat">
			Stylist
		</div>
		<div>
			#stylist#
		</div>
		<div class="clear"></div>
	</div>
	<div class="clear"></div><!--- clear the float for the outer div --->
-end loop--

in both ie and FF this looks terrible. I'm not sure If I should just be using a table here or if I should be using floats.

Gary you should probably have somehting to say about that...

the attachment show's how its supposed to look. The black boxes represent block level elements, not borders.

Dave

Hi all,

This is my first post here so go easy on me.

Firstly, please look at this:

h ttp://digitalformula.net/temp/layout.jpg - I can't post a proper URL since I'm a new user ... sorry for the space at the start of the address.

Anyway, the top part is what I have now and the bottom part is what I'm trying to get to.

Can someone please assist with the CSS for this? I know just enough CSS to be dangerous but I can't seem to find the right way to put the captions under the images without the image on the right dropping below the image and caption on the left.

I've tried all different types of float etc but nothing seems to work - I know it's something I'm doing wrong as this is probably one of the more basic questions posted here.

ANY help would be much appreciated!

Thanks,
digitalformula

I'm doing a 2 column layout via css (my first attempt at doing full css layout) and I'm having some problems in firefox getting it to work right.

Code:

#navBar{
  	float: left;
	width: 20%;
	margin: 0px;
	padding: 0px;
	background-color: #eeeeee;
	border-right: 1px solid #0163CB;
}


#content{
	width: 80%;
	float:left;
}

then my divs are as follows:
<div id=navBar>
     stuff
</div>
<div id=content>
     more stuff
</div>

The problem is that in firefox the top of content sits directly to the bottom and left of the end of navBar . If I set conent width to 78% it seems to be fine but it there are borders inside content that i want to take up 100% of the remaining page.

Thanks
Dave

Hello all, first time poster here...

I was working on a new site for an RP environment I gm using a table based layout. I ran into some problems and got fed up with it, So now for all the great reasons out there I decided to better learn CSS overnight and make the layout based on div tags and all that good stuff instead.

After piling all my information into the page I've been having some funky stuff happen to the layout; the right most column moves down below the other two if the window takes up less than the 1000px width I've allotted. Does anyone know why and a way to fix this? Please feel free to rip on my usage of png-s or anything else you'd like to also

Here's a temp link to the page on my site: louisjustmanDOTcom/prinz/newMOTD.html

...and a direct to my css file too: louisjustmanDOTcom/prinz/css/master.css

Thanks a lot in advance!

EDIT: Wow; all that time and it was a stupid mistake... extra closing div tag where i didn't need one.

Hi, I'm a total dork, and only barely able to finagle occasional css pieces to work right.

I need to center a background image, though need to keep minimum margin [if user resizes browser window] -- not sure how to do that?

I have a background-colored table cell that appears beneath this on the page, so if a user resizes their browser window too small, the background image floats off the left edge. THANK YOU!!

Hi all,
I'm working on a header which I'm having trouble with. Here's a crude diagram of what I'm looking to accomplish:

Code:

                        ____________
 _______________________|           |___
|  _____________________|    Logo   |_  |
| |                     |___________| | |
| |  Banner                           | |
| |___________________________________| |
|                                       |
|                                       | <-- container div

Uhhh, hopefully you can see what I'm getting at!

I want a logo to be positioned on top of the banner image, but offset above and to the right, outside the container div holding the banner.

Note also that the container div is centered in the page, so that the relative amount of space on either side of the container div increases and decreases with the browser window.

Approaches I've tried:
(1) Use position:absolute for the logo. The problem here is the horizontal position. Regardless of what I've tried, the logo moves horizontally with the size of the window. I want the logo fixed relative to the container div.

(2) I've tried to use negative margins and place the logo inside the container div, but this doesn't seem to work either.

How should I do this? All suggestions welcome.
Thanks!

Hi all,
I've spent several hours to solve this problem, but found nothing working . The problem (well, there are much more problems ) is that I use 2-cols layout, so the left column (menu) is floating left. And now I need in the one page's head to get 2 images, one aligned to the left, the other to the right and actual text of the headings.
I've found 2 good solution:
1) Classic, use float:left on one image, float:right on the other, and text-align: center on the headings. First thing I don't understand, why the image on the right is moved down? You can see it here. Then, the clear property should be used to force the headings to end bottom the images, but clear can't be used, because it also clears the menu (floating to the left) so the headings ends bottom the menu.
2) Using absolute/relative positioning - headigns can be made relatively positioned, images absolutely, one with left:0 and the other with right:0, but then the contents following after the headings is moved to the top, mixed with the heading.

Similar problem is being solved in this thread, but I didn't found there anything working .

Can anybody help, please? Here are used CSS: Web.css, Fotogalerie.css.

Hello,

I'm new to css layouts.

I had to float:left every element so the heights stretch

problem is if the image in "page_c_left" is wider than 45% then "page_c_right" will automatically go on the next line. (in Firefox, IE seems to wrap the text without moving the element).


also, i wanted to have the content displayed first for non-css browsers, but the examples used position:absolute. when the impression i got was that float is preferable to position.

i'm very confused on which method to use for layouts.

what method would you use for complex css layouts? float, position or other?

this is code with the text wrap problem
Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">

#main_c {
  float:left;
  width:770px;
  padding: 10px;
  border: 1px solid black
}

#header_c {
  float:left;
  border:1px solid brown
}

#page_c {
  float:left;
  width:100%;
  border:1px solid red
}

#page_c_left {
  float:left;
  padding:10px;
  border:1px solid blue
}

#page_c_right {
  float:left;
  width:55%;
  padding:10px;
  border:1px solid green

}

#footer_c {
  float:left;
  border:1px solid yellow
}
</style>
</head>
<body>

<div id="main_c">
<div id="header_c">
THIS IS THE HEADER
</div>
<div id="page_c">
     <div id="page_c_left"><img src="../../photos/image.jpg" alt="image" /></div>
     <div id="page_c_right">RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
     ajshd hfhgg<br />lakshh  toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
     ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
     ajshd hfhgg<br />lakshh  toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
     ka u annf au ffsdjkfjs didjs dd sjskjdk<br />RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
     ajshd hfhgg<br />lakshh  toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
     ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
     ajshd hfhgg<br />lakshh  toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
     ka u annf au ffsdjkfjs didjs dd sjskjdk<br /></div>
</div>

<div id="footer_c">
THIS IS THE FOOTER
</div>

</div>

</body>
</html>

if you could help,
thank you

At the moment I have a css layout nearly done.
It works fine in IE and Firefox except for that the left navbar does not push the footer down. Instead it jumps out the parent div.

The 2nd (maincontent) and 3rd (right column) do push the footer down. This wouldn't be such a problem if the navbar would contain static content, but it is dynamic and database driven.
A simple solution would be to move the navigate thing to the right bar, but sadly I'm not allowed to do that.

Layout CSS code
Code:

#body {
 position:relative;
 margin:0 auto;
 width:94%;
 min-width:50em;
 max-width:70em;
 border: 15px solid #ffffff;
}
#header {
/* border: 1px solid #000000;*/
 height: 185px;
 background-color:#ffffff;
 background-image: url(../images/design/test3.jpg);
}
#outer_wrapper {

 background: #ffffff url(../images/design/background_3.gif) repeat-y left;

 border-top:none;
 border-bottom:none;
}
#wrapper {

 background: url(../images/design/background_2.gif) repeat-y right;
}

#container {
 width: 100%;
 float: left;
 margin-right: -200px;
 background: #ffffff url(../images/design/background_2.gif) repeat-y right;
/*border:1px solid #000000;*/
}
#content {
 margin-right: 200px;
 /*background: url(../images/design/background_3.gif) repeat-y left;*/

}
#main {
/*border:1px solid #000000;*/
 margin-left: 150px;
/*  background-color:#bbbbbb;*/
}
#left {
 position: absolute;
 top:189px;
 width: 140px;
/* height: 100%;*/
 float: left;
 text-align: left;
/* border-left: 2px solid #bbbbbb;*/
 font:normal normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#sidebar {
 width: 200px;
 float: right;
  clear:right;
}
#footer {
/* border: 1px solid #000000;*/
 background: #304773;
 height: 30px;

}

.last {
 margin-bottom: 0;
}
.clearing {
 height: 0;
 clear: both;
}

Div structu
Code:

  <div id="body">
    <div id="header"><h1>Welkom bij Overeem de Haas</h1>
    </div>
    <div id="outer_wrapper">

      <div id="wrapper">
        <div id="container">
          <div id="content">
          
            <div id="main">
            </div>

            <div id="left">
                 <? include ("../include/navigatie.inc"); ?>
            </div>

            
          </div>
        </div>
        <div id="sidebar">
            <? include ("../include/uitloggen.inc");?>
            <? include ("../include/winkelmand.inc"); ?>
        </div>
        <div class="clearing">&nbsp;</div>
      </div>

    </div>

    <div id="footer"><p class="content"></p></div>
  </div>

navigatie.inc code
Code:

    <div id="navigatie">
            <ul>
               <li class="menu">Navigatie menu</li>
               <li><a href="index.php">Home pagina</a></li>
               <li><a href="#">Wat is Overeem?</a></li>
               <? ...
                 echo "<li><a href=\"#\">Contact</a></li>";
                 echo "</ul>";
                 echo "</div>";
               ?>

Live example

Can anyone (dev)shed some light on this?
I just can't get it to work without messing up the 3rd column.

The year is 2009, and surely there is a way to such a simple thing as displaying photos of unknown size in the H-center of a Div--without running off the screen. Oh wait, there isn't. The problem:

Given unknown picture size,

1) if I don't specify absolute positioning (or fixed), I can center it but then it floats to the top of the parent which looks silly.

2) If I do specify absolute (or fixed) positioning, I can't center it.

Please prove me wrong. I just want a simple slide-show page without telling folks what to set their resolution at, or how big the pictures need to be.