/    Sign up×
Community /Pin to ProfileBookmark

Help – How to create a liquid layout?

Copy linkTweet thisAlerts:
Apr 03.2012

New here!

I was wondering how to create a page that adopts to the user screen size?
I recently found out I can modify my current CSS layout and it would adopt the user’s screen size.
This is my first time attempting to create a liquid layout and I don’t even know where to start.

I would strongly appreciate your help.

Here is my CSS code:

[CODE]/*Background */
body{background-color:silver;}

/*page title*/
#pagetitle{background-color:black; color:white; list-style-type:none;
width:400px; height:27px; margin:0px 0px 0px 450px; text-align:center;}
#pagetitle img{width:25px; height:25px; margin:0px 0px 0px 20px; float:left;}

/*right hand list*/
#menu{padding:0px 5px 0px 5px; position:absolute; left:1030px; top:270px; background:black; width:230px;}
#menu ul{list-style-type: none; background:white;}
#menu a {text-decoration:none; color:black; }
#menu li a{display:block; margin:-3px 0px 0px -40px;}
#menu p{color:white; margin: 6px 50px 0px 85px; }
#menu a:hover{color:white; background:black;}
#menu li a:active{color:black; background:grey;}

/*Icons*/
#icons img{margin:30px; padding:15px; width: 95px; height:95px; float:left;
position:relative; left:-32px; top:-40px; }
#icons ul{list-style-type:none;}
#icons li a{margin:10px 45px 60px -30px; float:left; width:120px;
text-decoration:none; height:135px; color:white; }
#icons li p{position:relative; top:-82px; left:45px; }

/*Scroll bar*/
#scroll{height:600px; width:865px; overflow:auto; background:black; margin:60px 0px 0px 145px;}

/*Social tab*/
#share{position:absolute; top:200px; left:-45px;}
#share p{color:white; position:absolute; left:-12px; top:-15px; padding:20px 0px 0px 85px; }
#share ul a{float:right; width:130px; text-decoration:none; list-style-type:none; }
#share img{padding:0px 80px 0px 10px; width:60px; height:60px; background:black;}
#share li a{position:relative; top:10px; }

/*footer*/
#footer{width:850px; position:absolute; bottom:5px;}
#footer ul {word-spacing:15px; margin-bottom:180px; margin-left:30px;
text-indent:-35px; position:absolute; bottom:-150px; left:475px; background:black}
#footer li{display:inline; color:black;}
#footer a{color:white; text-decoration:none;}
#footer li a:hover{text-decoration:none; background:grey; color:yellow; letter-spacing:8px; }
#footer a:active{ color:yellow; letter-spacing:8px; background:red;}[/CODE]

My HTML:

[CODE]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

“http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>

<title>Title</title>

<link rel=”stylesheet” href=”mystylesheet.css” type=”text/css”>

</head>

<body>

<div id=”pagetitle”><img src=”example.jpg”><p>Page Title</p></div>

<div id=”menu”>

<p>Main menu</p>

<ul>

<li><a href=””>option 1</a></li>

<li><a href=””>option 2</a></li>

<li><a href=””>option 3</a></li>

<li><a href=””>option 4</a></li>

<li><a href=””>option 5</a></li>

<li><a href=””>option 6</a></li>

<li><a href=””>option 7</a></li>

<li><a href=””>option 8</a></li>

<li><a href=””>option 9</a></li>

<li><a href=””>option 10</a></li>

<li><a href=””>option 11</a></li>

<li><a href=””>option 12</a></li>

<li><a href=””>option 13</a></li>

<li><a href=””>option 14</a></li>

<li><a href=””>option 15</a></li>

<li><a href=””>option 16</a></li>

</ul>

</div>

<div id=”scroll”>

<div id=”icons”>

<ul>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

<li><a href=””><img src=”example.jpg” alt=”example.jpg”><p>Title</p></a></li>

</ul>

</div>

</div>

<div id=”share”>

<ul>

<li><a href=””><img src=”facebook.jpg”><p>Facebook</p></a></li>

<li><a href=””><img src=”twitter.jpg”><p>Twitter</p></a></li>

<li><a href=””><img src=”hotmail.jpg”><p>Hotmail</p></a></li>

<li><a href=””><img src=”linked-in.jpg”><p>Linked in</p></a></li>

<li><a href=””><img src=”Google+.jpg”><p>Google +</p></a></li>

<li><a href=””><img src=”dropbox.jpg”><p>Dropbox</p></a></li>

</ul>

</div>

<div id=”footer”>

<ul>

<li><a href= “about.html”>About </li></a>

<li><a href=”links.html”>Links </li></a>

<li><a href=”contact.html”>Contact</li></a>

<li><a href =”directory.html”>Directory </li></a>

</ul>

</div>

</body>

</html>[/CODE]

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@jedaisoulApr 03.2012 — Use the CSS [url=http://uk3.php.net/manual-lookup.php?pattern=float&lang=en&scope=quickref]float and clear[/url] commands. Take a look at my website http://www.emberwebsites.co.uk. It adjusts right down to 320 pixels screen width.
Copy linkTweet thisAlerts:
@handcraftedwebApr 03.2012 — Search for "media queries" "responsive design" and "web adaptive design".

Smashing Magazing is an example of responsvie layout (or maybe it's "adaptive", I get them mixed up), try resizing your browser and see how it changes the layout.

I found this article quite useful.
Copy linkTweet thisAlerts:
@cha55sonApr 03.2012 — If you want to see a professional use of this "liquid or fluid layout" checkout bootstrap.

http://twitter.github.com/bootstrap/scaffolding.html

View their CSS and you will see how they design fluid layouts.

jedaisoul is right though, essentially it will come down to float and clear commands, but hopefully Bootstrap will be a good demonstration of that.
Copy linkTweet thisAlerts:
@Nick-SauthorApr 06.2012 — Thanks for the resources everyone!
Copy linkTweet thisAlerts:
@Nick-SauthorApr 07.2012 — Hey everyone

I'm having some issues with my layout.

I added the max-width; and max-height; properties in some places. However the max-height property is not working at all, regardless which browser I use. When I re-size my browser window, the max-width works, but not the max-height.

Some of the content seems to re-size well, but I cant seem to be able to re-size images.

When I set the max-width to 100%, the images don't seem to shrink when I re-size the browser window.

Could someone please give me some clues? I'm kinda stuck, plus I'm still learning how to create a liquid layout.

Your help is greatly appreciated!

Note*

The zip folder attached contains the images for my layout.

You may add or replace the images in the html file if you don't want to download the zip folder.

Here is CSS code:

[CODE]#container{max-width:1280px; max-height:1024px;

max-width:1300px; min-width:320px; min-height:600px; max-height:1024px; float:center; }

body{background-color:silver;}

/*page title*/
#pagetitle{background-color:black; color:white; list-style-type:none;
max-width:400px; height:27px; margin:0px 0px 0px 450px; text-align:center;}
#pagetitle img{width:25px; height:25px; margin:0px 0px 0px 20px; float:left;}

/*right hand side list*/
#menu{padding:0px 5px 0px 5px; position:absolute; left:1030px; top:270px; background:black; max-width:230px;}
#menu ul{list-style-type: none; background:white;}
#menu a {text-decoration:none; color:black; }
#menu li a{display:block; margin:-3px 0px 0px -40px;}
#menu p{color:white; margin: 6px 50px 0px 85px; }
#menu a:hover{color:white; background:black;}
#menu li a:active{color:black; background:grey;}

/*Icons*/
#icons img{margin:30px; padding:15px; max-width: 95px; max-height:95px; float:left;
position:relative; left:-32px; top:-40px; }
#icons ul{list-style-type:none;}
#icons li a{margin:10px 45px 60px -30px; float:left; width:120px; text-decoration:none; height:135px; color:white; }
#icons li p{position:relative; top:-82px; left:45px; }

/*Scroll bar*/
#scroll{max-height:600px; max-width:865px; overflow:auto; background:black; margin:60px 0px 0px 145px;}

/*Social tab*/
#share{position:absolute; top:20px; left:-45px;}
#share p{color:white; position:absolute; left:-12px; top:-15px; padding:20px 0px 0px 85px; }
#share ul a{float:right; max-width:130px; max-height:70px; text-decoration:none; list-style-type:none; }
#share img{padding:0px 80px 0px 10px; width:60px; height:60px; max-width:100%; max-height:100%;
min-width:20px; min-height:20px; background:black;}
#share li a{position:relative; top:10px; }

/*footer*/
#footer{width:850px; position:absolute; bottom:5px;}
#footer ul {word-spacing:15px; margin-bottom:180px; margin-left:30px;
text-indent:-35px; position:absolute; bottom:-150px; left:475px; background:black}
#footer li{display:inline; color:black;}
#footer a{color:white; text-decoration:none;}
#footer li a:hover{text-decoration:none; background:grey; color:yellow; letter-spacing:8px; }
#footer a:active{ color:yellow; letter-spacing:8px; background:red;}[/CODE]

My HTML:
[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="mystylesheet.css" type="text/css">
</head>

<body>
<div id="container">
<div id="pagetitle"><img src="example.jpg"><p>Page Title</p></div>

<div id="menu">
<p>Main menu</p>
<ul>
<li><a href="">option 1</a></li>
<li><a href="">option 2</a></li>
<li><a href="">option 3</a></li>
<li><a href="">option 4</a></li>
<li><a href="">option 5</a></li>
<li><a href="">option 6</a></li>
<li><a href="">option 7</a></li>
<li><a href="">option 8</a></li>
<li><a href="">option 9</a></li>
<li><a href="">option 10</a></li>
<li><a href="">option 11</a></li>
<li><a href="">option 12</a></li>
<li><a href="">option 13</a></li>
<li><a href="">option 14</a></li>
<li><a href="">option 15</a></li>
<li><a href="">option 16</a></li>
</ul>
</div>

<div id="scroll">
<div id="icons">
<ul>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
<li><a href=""><img src="example.jpg" alt="example.jpg"><p>Title</p></a></li>
</ul>
</div>
</div>

<div id="share">
<ul>
<li><a href=""><img src="facebook.jpg"><p>Facebook</p></a></li>
<li><a href=""><img src="twitter.jpg"><p>Twitter</p></a></li>
<li><a href=""><img src="hotmail.jpg"><p>Hotmail</p></a></li>
<li><a href=""><img src="linked-in.jpg"><p>Linked in</p></a></li>
<li><a href=""><img src="Google+.jpg"><p>Google +</p></a></li>
<li><a href=""><img src="dropbox.jpg"><p>Dropbox</p></a></li>
<li><a href=""><img src="yahoo.jpg"><p>Yahoo Mail</p></a></li>
<li><a href=""><img src="Blogger.jpg"><p>Blogger</p></a></li>
<li><a href=""><img src="myspace.jpg"><p>My Space</p></a></li>
<li><a href=""><img src="meebo.jpg"><p>Meebo</p></a></li>
<li><a href=""><img src="flickr.jpg"><p>Flickr</p></a></li>
<li><a href=""><img src="delicious.jpg"><p>Delicious</p></a></li>
</ul>
</div>

<div id="footer">
<ul>
<li><a href= "about.html">About </li></a>
<li><a href="links.html">Links </li></a>
<li><a href="contact.html">Contact</li></a>
<li><a href ="directory.html">Directory </li></a>
</ul>
</div>
</div>
</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@Nick-SauthorApr 07.2012 — Never mind

I just learned how to use Media Queries to accomplish a liquid layout page.

Is this the only method to re-size the page and it's contents?
Copy linkTweet thisAlerts:
@auntniniApr 07.2012 — I'm stumbling and fumbling with this myself.

Basically, I think you need to give your images (as well as other elements) a percent width and max-width min-width. I think @Media Queries are used to determine the view-port device-width. I read that all @ styles (@media @font-size @import) should go at the very top of a stylesheet, but I've seen @media examples where the Media Queries were not at the very top -- so I'm not sure how important that is.

See WebDeveloper's "Mobile Web Development" forum http://www.webdeveloper.com/forum/forumdisplay.php?f=49 See resources listed by Major Payne http://www.webdeveloper.com/forum/showthread.php?t=258054

So far, for this page http://www.josephdenaro.com/comps/index.html, the alternate thumbnail size I tried to initiate with
<i>
</i>&lt;meta name="viewport" content="width=device-width"&gt; and CSS
@media only screen and (orientation:portrait) { /* portrait mode */
#wrap, #showpics, #container, #footer. .textbox { width:768px; }
#thumbnails img { display: inline-block; float:left; width: 33px; height: 50px; margin: 2px; }
}

did not work

On page http://www.josephdenaro.com/bw/index.html , the following did work
<i>
</i>&lt;style type="text/css" media="all"&gt;
#thumbnails img { display: inline-block; float:left;
width: 30%; max-width: 50px; min-width: 10px; max-height:75px;
padding: 0.1%; margin: 1.5%; text-align:center; }
&lt;/style&gt;
×

Success!

Help @Nick-S spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...