CSS - Liquid Layout Question

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.

Whenever I work on a liquid layout, I have been setting the Max-Width to 1280px. Is this still the normal setting?
Or designers do go wider these days?

Thank you

Hi Guys,

I have a layout which is currently setup to be liquid. Aka it spreads out depending on how big the browser window is.

I'm trying to get it to be a set width. I can't quite get it figured out.

Here is the link to the current layout (made to be generic).

It's a layout I got from a CCS class.

http://65.175.116.253/design/demo.html

The css is here

http://65.175.116.253/design/css.css

The entire package can be downloaded here

http://65.175.116.253/design/design.rar

Now, to explain how I want it to look, I took my browser and made it just wide enough to show how wide I want the layout to be, and took a screenshot. But I can't get my css to make the whole layout that wide.. I'm scracthing my head here because it's probably really easy.

http://65.175.116.253/design/demo.jpg

Let's not worry about the exact width, but I want to define in the css the pixel width, so that can be changed whenever.

Here is the CSS



Code:

/*--- Generic Styles ---*/

body 
	{
	background: #e3edc2; color: #333;
	font: .8em,  Arial, verdana, sans-serif;
	margin: 0; 
	padding:0px;

	}
	
	#main {width:840px; margin:18px auto 0 auto; _text-align:left;}

a
	{
	color: #686397;
	}

a img
	{
	border: 0px none;
	}

p
	{
	margin: 0 0 1em;
	}
	
	
.smallboldtext 	
	{ 
	font-family: verdana, helvetica, sans-serif;
   	color: #686397;
   	font-size: .7em;
	font-weight: bold;
	}
	

.mediumtext 
	{ 
	font-family: verdana, helvetica, sans-serif;
  	color: #686397;
  	font-size: .9em;
	}
	
.mediumboldtext 
	{ 
	font-family: verdana, helvetica, sans-serif;
  	color: #686397;
  	font-size: .9em;
	font-weight: bold;
	}
	
.largetext 
	{
	font-family: verdana, helvetica, sans-serif;
   	color: #686397;
   	font-size: 1.5em;
	}
	

	/*--- Header Styles ---*/
	
	
#header 
	{
	margin-bottom: 1.75em; 
	padding-top: 1px;
	background: #abd240;
	}
	
	
#navbar 
	{	
	margin: 0; 
	padding: 0.5em 3em;
	background: #686397; 
	color: #fff;
	}
	

#navbar li
	{
	display: inline;
	margin-right: 0.5em; padding-right: 0.75em;
	border-right: 1px solid #99c;
	font-weight: bold;
	
	}


#navbar li.last 
	{
	border: 0px none;
	}
	

#navbar a
	{
	color: #d4ec84;
	text-decoration: none;
	}
	

#today
	{
	text-align: right;
	margin-top: -1.66em; padding: 0 2em 0 0;
	color: #fff;
	line-height: 1;
	}
	
	
	/*--- Content Styles ---*/
	
#content 
	{
	float: left;
	padding: 0 20em 4em 3em;
	
	}
	

#content h1
	{
	background: #fff; color: #686397;
	font-size: 1.5em;
	margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
	}

	
#content h1 b
	{
	color: #b0d742;
	}
	
	
#content h2
	{
	margin: 0.5em 0; padding-bottom: 0.25em;
	border-bottom: 1px solid #b0d742;
	font-size: 1.5em;
	}
	
	
	/*--- Content Styles ---*/
	
table.basic
	{
	border: 0px;
	width: 100%;
	border-collapse: collapse; 
	}
	
table.basicborder
	{
	border: 2px solid #b0d742;
	width: 505px;
	border-collapse: collapse; 
	}

table.mainsearch 
	{
	border: 2px solid #b0d742;
	width: 415px;
	border-collapse: collapse; 
	}
	


/*--- Sidebar Styles ---*/



#sidebar 
	{
	float: right;
	width: 17em;
	margin: 0 1em 4em -18em; /* this creates a mathematical layout width of -1 */
	}
	
#sidebar div h3{
	background: #9b96ca;
}
#sidebar form_div 
	{
		margin: 0; padding: 0.8em;
	}
	
#sidebar div{
	background: #3a3c2d; color: #fff;
	padding: 0 1em 1em;
	margin-top: 0.75em;
}
#sidebar div h3{
	font-size: 1.25em;
	margin: 0 -0.8em; padding: 0.4em 0.8em;
	text-transform: lowercase;
}
	
	
#whatiscompany h4{
	margin: 0 0 0.5em; padding: 0.5em 0;
	border-bottom: 1px solid #fff;
	font-weight: normal;
}
#whatiscompany p:first-line{
	font-style: italic;
}
	
	

/*--- Footer Styles ---*/

#footer 
	{
	clear: both;
	padding: 1.5em 3em;
	background: #a0c63a;
	height: 15px;
	}

#footer p 
	{
	margin: .1em;
	}

#footer a 
	{
	color: #333;
	text-decoration: underline;
	}

Hi,

I'm having a problem a liquid layout using 100 percent width. The inner box peeks out side to the right of the containing box (which is 100% width).

I am viewing with firefox. At a resolution of 1024 width. With IE 6 it's very nasty looking (extremely wide).

Can anyone tell me what I need to do or what I'm doing wrong please

I have simplified the page to highlight the problem I'm having a problem on this page http://www.jamesfarrell.eu/fixhtml/search.htm

HTML as follows:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<head>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
		
		<link href="fixlayout.css" rel="stylesheet" type="text/css"/>
		
		
	</head>
	<body>

		
		
		<div id='wrap'>			
			<div id="content">
				<div class="searchresult1">
					<h3><a href='info.php?id=486'>rent in france</a> (222.00) per week)</h3><a href=info.php?id=486><img src='images/no_image.gif' width='130' height='127' border=0  /></a><p>1 Bedrooms, 0 Bathrooms, House</p><p>s..</p>
					<a href='info.php?id=486'>More details</a>
				</div>
			</div>
		</div>
			
		
		<!-- <div id="goToTop" class="sNav"><p><a href="#content">^ Top</a></p></div> -->

		
		
	</body>
</html>

CSS as follows:
Code:

body {
	color: #333333;
	background-color: white;
	font-size: 12px;
	line-height: 1.3em;
	margin: 0;
	padding: 0;
	border:1px solid black;
	width:100%;
	}
	#wrap {
	background: white;
	margin: 0 0 2em 22%;
	
}
#content {
	padding:0;
	border-right: 1px solid #ccc;
	margin-right: 4em; 
	width:97%;
	margin-left:2.75%;
}
div.searchresult1 {
	

	width:800px;
	width: expression(this.width > 400 ? 400: true);
	
	margin-top:20px;
	margin-right:40%;
	border:1px solid #9eceeb;	

}
div.searchresult1:after {
content:".";
display:block;
clear:both;
height: 0; 
visibility: hidden;
}
div.searchresult1{display: inline-block;} 
/* Hides from IE Mac \*/ 
* html 
div.searchresult1{height: 1%;} 
div.searchresult1{display:block;}
 /* End Hack */ 	
 div.searchresult1 h3{
	background: #c0ddea;
	margin:0;
	padding:4px;
	
}
div.searchresult1 h4{
	background: #c0ddea;
	margin:0;
	padding:4px;
	border:1px solid black;
}
div.searchresult1 img {
	margin: 10px;
	float:left;
	border:1px solid black;
}

This post can be deleted. I figured out the problem.

I would appreciate any advise as to whether this degrades properly as the browser is narrowed. I didn't post this in the "critique" forum because my only concern (right now) is related to CSS. There is a separate style sheet for handhelds, so if you have one I would appreciate a look from there also. Most links are still inactive.

Liquid design

TIA,
Rob

I'm building a simple gallery site for my old man, who wants a place to upload his artwork. I've made all the slices in ImageReady for the images around the edge of the screen, and customised the code so that they fit to any resolution. I'm having a problem with the DIV tag that I would like to contain the main section of the site. I would like it to fit the gap in the middle - whatever size that may be - so it can scroll if necessary later on. As it is though, it just wraps around whatever content I put there. Here's the stylesheet code for that particular DIV:


Code:

#vg-09 {
	position:absolute;
	margin-top:183px;
	margin-left:49px;
	margin-right:56px;
	margin-bottom:97px;
	background-image: url(images/vg_09.gif);
}

I thought those margins would make it meet the surrounding images, but it doesnt work. I've also tried setting the height and width to 100%, but then it extends beyond the size of the screen and looks ugly after scrolling.

Here's the Page:
http://vic.retina-designs.com

Does anyone know how I can get that DIV layer to sit flush against all the surrounding images? Thanks for any help!

EDIT: Added the link

'ello

question, right.. a table sumthing like dis..

<table style="width: 100%">
<tr>
<td style="width: 200px;"></td>
<td></td>
</tr>
</table>

gives ya a nice two column layout, where the first has a fixed width, and the second column fill the rest of the parent container.

Also, heres the kicker.. when u get loads of content in the second column, and it get extended vertically, the second container is as well.. and thats nice and all..

So, question.. how do i do this with divisions and CSS? i tried a ton of different stuff, and the closest thing i came was using height: 100% and like, scrollbars in the second column. But i dont really want that.. I think like, min-height is the solution, but a cant tame it, when i start using it.. things goes weird :P

the table model works, but i really want to lean to do this "right" so, lill' help please?

cheers,

hi

at my workplace they have asked me to create a simple html page which will be used as a small widget in a website. as per the requirement in the html file. i should not use an external stylesheet and also no embedded style however i should write the page completely using inline css. all this is fine.


however my question and issue i am facing is with adjusting height as the content increasing when i give for example margin or padding.

please check out this link where i have created an image of what i am creating as html page using inline css.
http://www.sudhakargolakaram.co.in/form.html

as per the image there is an outer div which has the light blue background color which i have created like a container div with the background color

the dark blue rectangles are 3 images and the white color on the right with the rounded rectangle at the top and bottom is where content like header tag, img tag, forms etc will be used.

lets say for example i divide the images and content as 2 divs floating left with images div as 100px and content on the right as 300px width so a total of 400px and a total height of 300px

based on the design that i have the total width is 400px (left div with images=100px and right div with content=400px) and total height is 300px for example.

i am ok with the left div as the images have a fixed width and height, the problem i am facing with is the content div.


as the content div contains header tags, a small paragraph information within p tag, a small form with about 2 to 3 form fields, in order to add all these elements as per the design i am using padding top, padding bottom and if needed margin top and margin bottom. so due to this the content may go beyond the bottom div which has the rounded rectangle at the bottom, and this is not how it should appear the entire content should sit inside the 300px height in the right div

so do i have to keep subtracting the amount of padding and margin i am using from the height value of the right div so that the content sits inside within the total 300px height.

how do i go about this height aspect which i am having issue with and also is there something specific that i have to keep in mind for ie6 browser.


for the left and right div do i have to use

#left{
float: left;
width: 100px;
height: auto;
}

#right{
float: left;
width: 300px;
height: auto;
}

or do i have to specify the fixed height which is 300px for #left and #right divs

also in the #right div i am using 3 inner divs
1 for top rounded rectangle background = { background: url(topbg.jpg no-repeat; width:300px; height: 10px; }

2nd div with white background color no background image= do i have to specify a fixed height for this 2nd div = { width:300px; height: ; }

3rd for bottom rounded rectangle background image = { background: url(bottombg.jpg no-repeat; width:300px; height: 10px; }



any help will be greatly appreciated.

thanks.

I am working on this website : http://five-art.com

and the code for the nav bar is :

Code:

<div class="content">
<table><tr><td><h1>[5]Art</h1></td><td class="navtop">&nbsp; :: <a href="index.php">Call for Submissions</a> :: <a href="ms.php">Mission Statement</a> :: <a href="past.php">Event Archive</a> :: <a href="members.php">Members</a> :: <a href="contact.php">Contact Us</a>.</td></tr></table> 

</div>

I added the table so that I could have two different font sizes without the text going to the next line.

What would be the best way to do this with css.

Thanks!

So I just started working on my first complete website in a couple years and needless to say i'm behind the times in regards to layouts. I want to use CSS, more specifically DIVs to layout my site. I created a background in Photoshop that will serve as a guide for where I want the various boxes/text.

I've done extensive searching and reading on the different kinds of positioning you can do with DIVs. Whether it be absolute or relative or float. But I have yet to figure out the proper way to code in the various DIVs so that they remain in the same spot no matter the resolution of the screen or if someone resizes the window. I just want to be able to tell them where I want them and not have to worry about them moving. The way I have it coded now, the DIV moves around when I resize the window - something I don't want.

Any help would be greatly appreciated! Like I said I'm just getting back on my feet when it comes to HTML/CSS and i'm a bit rusty. Thanks!!


Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>

<style type="text/css">

body {
	font-family: 'Lato', sans-serif;
	margin: 0;
	background: #0C0 url(landscaping1.jpg) no-repeat center top;
	
}

#leftcontent
{
border:1px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:300px;
height:300px;
border-radius:12px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
float:left;
position:relative;
top:450px;
left:80px;
}

</style>
<title>Mueller Lawn and Lanscape 2012</title>
</head>

<body>

<div id="leftcontent">
Some text goes here. 
</div>

</body>
</html>

Also, here is what the site looks like with the above code. Obviously i'm still working on the visual aspects of the site, so disregard that part for now.
http://i110.photobucket.com/albums/n120/infantryclothing/0cb6b676.png

I have a layout question for which I will reference Dan Cederholm's site, http://www.simplebits.com. He has a two column layout, div#content on the left and div#sidebar on the right, both are contained by div#main-body. #content is floated to the left and #sidebar is floated to the right. How is he #main-body to extend the entire length of the page without containing some normal flow elements?

Hello All,
I've had great luck with this site helping out in the past.

My main question I want to ask today is just to see if others think that I have layed out this page as efficiently, and as easy to work with cross-platform as I can. Because I'm having problems with IE on XP looking good with it, whereas it looks good on Mac.

If you have suggestions of how to lay things out differently, I'd really appreciate it.

Here's the site:
http://www.genius-creative.com/index2.html

Here's the attached CSS:
http://www.genius-creative.com/geniusall.css

Thanks a million!

-Brandon

Hello all. I have implemented a sort of 3 column layout on part of a site I'm working on:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>My site</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      #content { 
        line-height: 130%;
        padding: 1em;
        clear: both; } /* end #content */
      #column_1 {
        padding-left: 1em;
        padding-right: 1em;		
        float: left;
      		background: red;
        width: 33%; } /* end #column_1 */
      #column_2 {
        margin-left: 36%;
      		background: green;
        padding-left: 1em;
        padding-right: 1em;		
        width: 25%; } /* end #column_2 */
      #column_3 { 
        float: right; 
      		background: blue;
        padding-left: 1em;
        padding-right: 1em;		
        width: 33%; } /* end #column_3 */
						.clearfix:after {
        content: ".";
        display: block;
        height: 0;
        font-size: 0;
        clear: both;
        visibility: hidden; } /* end .clearfix:after */
      .clearfix {display: block;}
      /* Hides from IE5/Mac \*/
      * html .clearfix {height: 1px;}
      .clearfix {display: block;}
      /* End hide from IE5/Mac */
   	</style>
  </head>
  <body>
    <div id="content">
      <div class="clearfix">
       <div id="column_1">
         <p>Column 1</p>
         <p>Line 1</p>
         <p>Line 2</p>
         <p>Line 3</p>
       </div>
       <div id="column_3">
         <p>Column 3</p>
         <p>Line 1</p>
         <p>Line 2</p>
         <p>Line 3</p>
         <p>Line 4</p>
         <p>Line 5</p>
         <p>Line 6</p>
         <p>Line 7</p>
       </div>
       <div id="column_2">
         <p>Column 2</p>
         <p>Line 1</p>
         <p>Line 2</p>
         <p>Line 3</p>
       </div>
     </div>
   </div>
  </body>
</html>

In FireFox and Safari, the colors line up but the text does not and in Opera the text lines up but the color does not. There's a rendering problem with IE that I will address later.

The solution I would like to achieve would be to have the text and the colors lining up. What would be the best way to achieve this?

I'm working on www.wirelessguy.net and I'm trying to add something to my layout.

I want to have an outer box that surrounds the content and then add left and right borders to it so I can change the outside background color.

I'm currently using 10% left/right margins to get the material in the middle of the page.

Here is my css for the outerbox:

Code:

div#outerBox
{
	margin-left:-5%;
	margin-right:-5%;
	border-left: 1px dotted red;
	border-right: 1px dotted red;
	width:100%;
	height:100%;
}

When I do this I get the following result: www.wirelessguy.net/index2.php

Any ideas on how to get the box to be made with negative margins?