CSS - Div With Image On Left And Content On Right

I'm trying to use CSS to create a layout that has a top header, followed by a left side navbar, a center content area, and a bottom footer. I'm totally lost by the CSS needed to make this happen. Here's what I'm trying. It's borrowed from other posts that came up by searching for headers and footer. Any help would be fantastic. I'm trying to end my use of frames for the header and navbar. Thanks in advance for any help.

Code:

 #header {
        
        left: 0;
        width: 100%;
        height:125px;
        top: 0;
     	background-image: url(images/topbackground2.jpg);
        background-repeat: repeat;

}

#navbar{
		width:122px;
		height:100%;
		background-color:#3f79a1;
		position: absolute;
               top: 125px;
               left: 0px;}

#footer{
           background-image: url(images/gradientsmaller2.gif);
          font: 10pt;
          position: absolute;
          bottom: 0;
          left:0;
          background-color: #ccffcc;
          width: 100%; 
          text-align: center;
          padding: 0 15%;

}

Hi,

I have a site with a left navigation bar (which is fixed width, and has a background colour that must stretch full screen from top to bottom of the page).

The site is:
http://67.18.220.222/~duoboots/2005/z.html

Stylesheet:
http://67.18.220.222/~duoboots/2005...s/style2005.css

As you can see, the left navigation menu stops once the content within the div is displayed. It does not stretch to the bottom of the screen. (say if you're on 1024 x 768 resolution)

Note: this varies according to the main (right) content. If the main content was shorter than the menu bar - it would work fine. The menu bar has a min-height of 100% which means the background applies to the size of your screen.

However, if the main content height is greater than that of the menu bar - then the menu bar will not adapt, but the background simply stops.

Is there a workaround for this? With tables, this could easily be achieved because the background colour of one cell is stretch until the end of the table, and not the content within the cell. However, I'd like to do this with CSS.

Here's some CSS:

Code:

body, p {

	color:#666666 ; 
	font-family: Verdana, Arial ; 
	font-size:7.5pt ; 
	font-weight:normal; 
}
body {
	height:100%;
	margin: 0px;
	background-color: #2F201E;
}

#container {  
 	width: 968px;
	height:100%;
}


#nav {
	width: 201px;
	border-right: 3px solid #FFFFFF;
	background: #8D603B;
	float: left;
	min-height:100%;
}

I've tried switching "min-height" and "height" but they don't seem to do what I want.... if anyone could help me out it would be MUCH appreciated!

Thanks a lot!

Figured this was simple, but I can't seem to figure it out.

Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way.

With CSS like:

.imginfo {float:none;clear:both;margin-top:1em;}
.imginfo img {float:left;margin-right:1em;}

and code like:

Code:

<div class="imginfo">
  <img src="..." />
  Line of Text<br />
  Line of Text<br />
  Line of Text<br />
</div>

I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image.

Attempting to use vertical-align: bottom doesn't do anything with the text.

The effect I am looking for is like below. If you assume the XXX are the image...

Code:

XXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX Line of Text
XXXXXXXXXXXX Line of Text
XXXXXXXXXXXX Line of Text

G'day all,

I'm trying to get two different images to appear of the far left and far right of the page, extending to the bottom of the page to act as a border.

I currently have two different styles for each, and two different <div> tags, however I think the nesting of the <div> tags may be causing it to stuff up and knock off the positioning.

How can I get the two images to go to the far left and right of the screen, using CSS, in a way that will also let me use the repeating function to stretch them to the bottom of the screen.

This is a screenshot of a mockup I did in Photoshop, the images I need to position are the grey fadeout ones on the left and right.
http://www.ausvirtual.com/Website%20copy.jpg

Cheers.

ok at Rodoslovlje I have an issue. The menu on the left is most of the times longer then the right content part. Is there a way to fix that when this occurs I can make the right part move along without editing every page and hitting enter 20 times?

Thnx

Hi there!

I'm trying to place an image that tiles on the left far side of the background and on the right hand side. This is so it will have columns down the sides. I'm not sure how to begin to do this... I know I could do with this tables, but I'm trying to do this without tables and pure CSS.

Any thoughts? I wish I had an example to show....

Thanks!

Nathan

hi,

this is my first post so go easy with me!

I am trying to use css to make a top navigation bar, with an image to the left and an ul to the right, i want to ul to be in line with the bottom of the image so that it forms a nav bar but i am doing something wrong...!

below is what i think is the relevant code and css.... any help appreciated!! If i need to upload the rest of the pages then let me know. i'm coding in php but this bit is all html so i guess that doesnt really matter for now, i'm new to web development, its part of a uni assignment!

Code:
HTML

<div id="header">
  <p align="left">
  <a href="index.php">
  <img src="/images/GATlogo.jpg" width="150" height="150" alt="Home" border="0" /></a>

  <ul>
  <li><strong><?php echo "$heading"; ?></strong></li>
  <li><img src="/images/login.gif" border="0"/><a href="  Login.php">Login</a></li>
  <li><img src="/images/register.gif" border="0"/><a href="  Register.php">Register</a></li>
  </ul>
</div>

Code:
CSS

#header{
  vertical-align: top;
  text-align: right;
  border: solid thin #999999;
  margin: 0px 0px 0px 0px;
  background: #336699;
  font-family: MS Trebuchet, MS Verdana, Univers, Helvetica, Arial, sans-serif;
  color: #ffffff;
  height: 155px;
}

#header li {         
  display: inline;
  list-style: none;
  padding: 40px;
}

#header a:link {
  color: #ffffff;
  text-decoration: none;
}

#header a:visited {
  color: #ffffff;
  text-decoration: none;
}

#header a:hover {
  color: #ffffff;
  text-decoration: none;
}

#header a:active {
  color: #ffffff;
  text-decoration: none;
}

I'm having cross-browser compatibility with my website. On the right hand side I want to have images on the right and text to its left. I've tried variations of html/css but one seems to work with one browser and then not with the other.

In safari it looks fine right now.

http://www.ryanbuckley.ca/photos/

Can anyone help with this little annoyance?

Thanks in advance!
Ryan

Hi

I'm trying to figure out how to postion an Image at the bottom left of a <DIV> container.

Can someone supply an example style class defintion which will place an Image at the bottom left of the div container..

I presently have:

<div>
<h2>Heading 2</h2>
<p>My paragraph text goes here and goes on for a line or so</p>
<img class="bottomleft" src="button.gif" alt="button" />
</div>

.bottomleft {
position: relative;
bottom: 0px
left: 0px
}

But this places the Image relative to the end of the <p> tag not relative to the <div>

How can I position the Image relative to the botom left of <div> tag?

Thanks
David

Hello,

I'm trying to float an image inside a content div that is inside a wrapper div that already has a float left (nav) div earlier in the html. I know that this means that the floated image div will not be cleared until after the already floating nav div, since this is the one that comes earlier in the html and is quite large. It leaves a large gap until it clears the nav div.

I have tried a couple of things, here is the page I'm working on and this is the css file

This hasn't been tested on Windows, so I have no idea how it looks.
It has been tested on the Mac: Safari, Opera, Netscape and Firefox display as described above, but IE Mac is way off whack.

The current setup of the page is this:

HTML: Code:

<div id="content">
	<div id="breadcrumb"><a href="http://www.huntacular.com/">Homepage</a></div>
	
	<div class="image1">
		<img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150">
		<p class="red">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis 
		parturient montes, nascetur ridiculus mus.</p>
	</div>
	<div class="image2">
		<img class="right" src="./images/pic.png" alt="Mystery Image" width"260" height="150">
		<p class="orange">Donec accumsan. Pellentesque ac est vitae sapien scelerisque auctor. Nunc pede 
		diam, interdum vel, dictum ut, egestas eget, metus. Maecenas eget sapien.</p>
	</div>
		
	<div class="another3">
		<img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150">
		<p class="blue">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis parturient 
		montes, nascetur ridiculus mus. Sed vulputate. Nulla ac leo sollicitudin mauris fringilla 
		consectetuer.</p>
	</div>

CSS: Code:

img.left {
	float: left;
	border: solid 1px black;
	padding: 10px;
	margin-right:10px;
	margin: bottom: 10px;
}

img.right {
	float: right;
	border: solid 1px black;
	padding: 10px;
	margin-left:10px;
}

.image1 {
	border: red 1px solid;
	padding : 0px;
}
.image2 {
	border: orange 1px solid;
	padding : 0px;
}
.image3 {
	border: blue 1px solid;
	padding : 0px;
}
/* Trying to sort the float problem - this sends IE Mac nuts, not checked on IE Win */
.another:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}
.another {display: inline-table;}

/* Hides from IE5/Mac \*/
* html .another {height: 1px;}
.another {display: block;}
/* End hide from IE5/Mac */

/* .clearer {
	clear: both;
} */

p.red {
	color: red;
}
p.orange {
	color: orange;
}
p.blue {
	color: blue;
}

Is there a work around? I thought I'd found one in the third attempt - the one with blue text, but I'm not sure if I've implemented it correctly. Also, IE Mac isn't doing any of these correctly either (well, nearly the second one, but I haven't tested this stuff on Windows either.

Is there a solution?

http://www.ilumos.co.uk/site/

http://www.ilumos.co.uk/site/style/styleDefault.css

As you can see on the left there is a "glowing" blue-white fadey thing going on on the left of the page, but it stops after the header (#header) for no apparent reason. The page renders fine in IE, but in Firefox or any other standards obeying browser it stops there.

the CSS for the page border on the left is as follows:

#wrap {
background: url("../images/ilumosPageFadeLeft.jpg") repeat-y;
padding-left: 25px;
width: 750px;
}

(the wrap div contains all of the page's content)

How can I make the image extend to the bottom of the page?


Thanks

I'm trying to position the image below vertically center and horizontally left to no avail. Its horizontally left but centers the top of the image in the center of the page. What am I doing wrong?

<DIV style="position: absolute; top: 50%; left: 0px; border: none"><img src="images/right.jpg"></img></DIV>

I would like to align left images so that they touch against each other.
Here is a capture of my problem.
dollhedz.com/test

[CODE]
<style type="text/css">

body{
background-color:#000033;
color:#00cc33;

}


#wrapper{
background-color:#000000;
margin:15px auto 0px;
width:700px;
height:800px;
}



#sitenav{
background-image:url(sitegrax/sitenavback.jpg);
background-repeat: no-repeat;
height:55px;
padding-left:213px;
border: 0px;
margin:0px;
text-align:left;
}

#one{
float:left;
text-align:left;
align:left;
margin:0px;
padding:0px;
}




</style>
</head>

<body>

<div id="wrapper">

<div id="banner"><img src="sitegrax/banner.jpg" alt=" yellow Jacket dodging a 355 smoothbore slug" border="0" />
</div>

<div id="sitenav" >
<div id="one"><a href=""><img src="sitegrax/bt_game_nav.jpg" alt="site navigation games" border="1" /></a>
<a href="" align="left"><img src="sitegrax/bt_history_nav.jpg" alt="site navigation history" border="1" /></a>
<a href=""><img src="sitegrax/bt_pilot_nav.jpg" alt="site navigation pilot"border="1" /></a></div>
</div>

</div>

</body>
</code>

Problem: There is a 5 to 6 pixel space between each image that I would like gone. The 1px border around each image is there to show the edge of each image.

thank you for your time

Hi. I'm reasonably new to tableless-design, and i've run into the common problem of aligning one bit of text to the left of a line and another to the right. I have searched the web and have found several means of achieving this, but in my case there is an image combined with a inline list (horizontal menu) that needs to be aligned left, and another combination of text and images to the right.

| [image] text .... right-side text |

This might seem rather simple, but it becomes more complicated: the entire block needs to be padded on the top in order for the text not to appear cramped up at the top, and the left-margin and right-margin of the image is then set to the corresponding negative values in order for it to still be displayed precisely in the top left corner. I have found this to be the only cross-browser compatible method.

All the methods I have experimented with to align the two sides on left and right have either resulted in the image and text to be incorrectly (vertically) aligned or be displayed in different lines, even when the image is not used as part of the alignment-method.

Any help or suggestions will be greatly appreciated.
Thanx

Hi everyone,

I have a problem I'm trying to overcome with displaying an image next to the text in a table cell. I've set the table cell to valign=middle and this achieves the layout I want (hopefully this demonstration will look right..)
Code:

PICTUREHERE
PICTUREHERE
PICTUREHERE   The text goes here
PICTUREHERE
PICTUREHERE

So the text and the picture are laid out along the middle of the cell. However as soon as the text gets too big for the cell (or the cell gets smaller) this happens:
Code:

PICTUREHERE
PICTUREHERE
PICTUREHERE  The text goes here, but when it's longer
PICTUREHERE
PICTUREHERE
the remainder comes here

I knew this to be because the img is still an inline element in the cell. I tried to solve the problem by making the img float:left, but the following happens, even if the valign=middle property is set in the cell:
Code:

PICTUREHERE   The text goes here, but when it's longer
PICTUREHERE   the remainder comes here
PICTUREHERE
PICTUREHERE
PICTUREHERE

Is it possible to achieve the top layout. If it is can someone help me please (it's probably staring me in the face)

Thank you in advance
Andy