%19 Left Section Width, %80 Content width:
But i want to fix left section to 200px and content section is the rest of viewable area's width.
How can i do this with CSS?
<html>
<head>
<title>TWO-COLUMN LIQUID LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
}
div
{
border: 1px solid black;
}
#header
{
background: #0f0;
width: 100%;
}
#leftcol
{
background: #f00;
float: left;
width:19%;
/* max-width: 200px; */
height: 500px;
}
#content
{
background: #fff;
float: left;
width: 80%;
height: 500px;
}
#footer
{
background: #0f0;
clear: both;
width: 100%;
}
</style>
</head>
<body>
<div id="header">
Header Section</div>
<div id="leftcol">
Left Section</div>
<div id="content">
Content Section</div>
<div id="footer">
Footer Section</div>
</body>
</html>
There's plenty of ready made templates that would work here, take a look at these for example:
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/
http://bonrouge.com/2c-hf-fluid.php
Take a look: http://www.brunildo.org/test/lf100r.html
Related
I want to have an image centered within each DIV that is floating left within a larger DIV.
In the following example, I want the gray boxes ("assetInfoBody") to be centered within the green boxes ("assetBox"). What else can I try here beside text-align:center and margin:auto?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#assets {
background-color: orange;
padding: 5px;
width: 100%;
height: 100%;
}
.assetbox {
background-color: lightgreen;
float: left;
width: 100px;
margin-right: 5px;
text-align: center;
}
.assetInfoBody {
background-color: grey;
position: relative;
width: 80px;
text-align: center;
}
.centeredItem {
margin-left: auto;
margin-right: auto;
top: 0px;
}
</style>
</head>
<body>
<div id="assets">
<div class="assetbox">
<div class="assetInfoBody">
<div class="centeredItem">
<img src="images/box.png"/>
</div>
</div>
</div>
<div class="assetbox">
<div class="assetInfoBody">
<div class="centeredItem">
<img src="images/box.png"/>
</div>
</div>
</div>
<div class="assetbox">
<div class="assetInfoBody">
<div class="centeredItem">
<img src="images/box.png"/>
</div>
</div>
</div>
</div>
</body>
</html>
See this example for a reference to how you could achieve this. As your class .assetInfoBody class has a set width you can align the .centeredItem by applying the rule margin:0 auto to it. By also applying text-align:center to .centeredItem you're able to always keep the image centered within it.
probably you want a css like that:
#assets {
background-color: orange;
padding: 5px;
width: 100%;
}
.assetbox {
background-color: lightgreen;
display: inline-block;
width: 100px;
margin-right: 5px;
}
.assetInfoBody {
background-color: grey;
margin: 0 auto !important;
width: 80px;
}
.centeredItem {
margin-left: auto;
margin-right: auto;
}
I need the following in a header of fixed width:
A div of varying width floated left.
A div of varying width floated right.
An h2 centered between them that takes up any remaining space.
The floated divs contain content that may vary in size.
I've tried various approaches but they have all failed. I know one solution is to absolutely position the outer divs, then stretch the h2 out for the full width and center the text so it sits centrally, but there must be a nicer way to do this.
A basic jsFiddle example with minimal markup.
HTML
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
<h2>H2</h2>
</div>
CSS
#container {
border:1px solid #999;
}
#left {
float:left;
}
#right {
float:right;
}
h2 {
text-align:center;
margin:0;
}
You could use display: inline-block instead of float, and then use CSS calc to get the right width for the middle div:
HTML:
<div id="wrapper">
<div id="one"></div><div id="two"></div><div id="three"></div>
</div>
CSS:
#wrapper {
min-width: 300px;
}
#one, #two, #three {
display: inline-block;
height: 300px;
}
#one {
background: lightgreen;
width: 100px;
}
#two {
background: lightblue;
width: 100%;
width: calc(100% - 300px);
width: -webkit-calc(100% - 300px);
width: -moz-calc(100% - 300px);
}
#three {
background: lightgreen;
width: 200px;
}
jsFiddle Demo
You can then put the h2 inside the the middle div, in this case #two.
Considering the following HTML:
<div id="parent">
<div id="left">Left</div>
<h2>Heading</h2>
<div id="right">Right</div>
</div>
CSS Code:
#parent {
width: 80%;
margin: auto;
display: table;
}
#parent div, #parent h2 {
display: table-cell;
}
#left, #right {
width: 50px;
}
Demo: http://jsfiddle.net/MAhmadZ/pMfLx/
try this out
i think it may solve your problem
<style type="text/css">
div{
display: inline-block;
vertical-align: top;
height: 50px;
border: 1px solid red;
position: static;
}
#one{
float: left;
width: 100px;
}
#three{
float: right;
width: 100px;
}
</style>
<div id="outerDiv" style="width: 500px;height: 500px;border: 1px solid red;">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<script type="text/javascript">
var spaceLeft = document.getElementById("one").offsetWidth;
var spaceRight = document.getElementById("three").offsetWidth;
var totalSpace = document.getElementById("outerDiv").offsetWidth;
document.getElementById("two").style.width = totalSpace-(spaceLeft+spaceRight+4) + "px";
</script>
Here's a simple puzzle that's been frustrating me for a while today:
Consider this page markup:
<head>
<style type="text/css">
#wrapper { overflow: hidden; }
#content { width: 750px; height: 100px; background: orange; }
</style>
</head>
<body>
<div id="wrapper">
<div id="content">Foo bar</div>
</div>
</body>
How can I get div#content centered in the page regardless of viewport width?
I've tried a variety of tricks (including text-align: center; display: inline-block;) and absolute positioning, but with all of them the div#content is left-aligned when the browser window is brought under 750px in width.
I've seen a few high-profile websites do this in the past. For example on Apple.com when they advertised the new retina iPad: the iPad pictured was a very wide image that extended past the main page area (note it was not a CSS background image of the <body> element), but it didn't cause scrolling when the browser window only fit the main page content. Unfortunately I can't seem to find any existing sites that do this so I can't find a reference.
Thanks.
Is this it? Take a look -> http://jsfiddle.net/joplomacedo/CkvuG/
HTML
<div id="page">
<div id="main">
<div id="extended-out"><img src="http://myfreeipad.us.com/wp-content/uploads/2011/10/ipad.png" /></div>
</div>
</div>
CSS
#page {
overflow: hidden;
min-width: 200px; /*same as #mains width*/
}
#main{
position: relative;
height: 500px;
width: 200px;
margin: 0 auto;
background-color: lightgreen;
}
#extended-out {
height: 200px;
margin: 0 -100px;
background: indianred;
border: 1px solid red;
}
#extended-out img {
width: 100%; height: 100%;
}
http://jsfiddle.net/CNNcV/
<head>
<style type="text/css">
#wrapper { overflow: hidden; }
#content { width: 750px; height: 100px; background: orange;
margin:0px auto;
width:100%;}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">Foo bar</div>
</div>
</body>
Is that what you're looking for?
Add margin: auto to this,
#content { width: 750px; height: 100px; background: orange; margin: auto}
I would like to try to build a clean and nice piece of code where I can accomplish the result you see in the image below. It's ok in Firefox, Chrome or Safari, but not in IE.
I created a JSFiddle with the code.
Basically all I want a 100% width of the red bar (edge to edge in the window) but the content (including the navigation) should be limited in width.
So I'm looking for a nice, clean snippet to make this work in all browsers (including IE...)
<style>
body{
background-color: #fff;
margin: 0;
padding: 0;
}
#subtopContainer{
background-color: #f00;
}
#subtop, #header, #content{
width: 980px;
margin-left: auto;
margin-right: auto;
}
#header{
height: 150px;
}
#subtop{
height: 50px;
}
</style>
<div id='container'>
<div id='headerContainer'>
<div id='header'></div>
</div>
<div id='subtopContainer'>
<div id='subtop'></div>
</div>
<div id='contentContainer'>
<div id='content'></div>
</div>
</div>
<style>
body { background-color: #fff; margin: 0; padding: 0; }
div.wrapper { margin: 0 auto; width: 980px; background: lime}
div.header { height: 70px; margin-bottom: 40px;}
div.content { height: 400px; }
div.bar { height: 40px; background: #f00; overflow: hidden; position: absolute; top: 70px; width: 100%;}
</style>
<body>
<div class="bar"></div>
<div class="wrapper">
<div class="header">
Header Stuff
</div>
<div class="content">
In order for this to work,
div.bar 'top' = div.header 'height'
div.header 'margin-bottom' = div.bar 'height'.
</div>
</div>
</body>
Given this HTML:
<div id="div1">
<div id="div1a"></div>
<div id="div1b"></div>
<div id="div1c"></div>
<div id="div1d"></div>
</div>
<div id="div2a"></div>
Can I get this structure using CSS display property?
Sure, it can be done with the following CSS:
/* Height of the top box. Change as needed to suit your layout */
#div1a {
height: 50px;
}
/* 3 left side boxes. Again, alter the height/width as needed. If you change
the width, you'll need to update the margin-left on #div2a as well. */
#div1b, #div1c, #div1d {
width: 100px;
height: 60px;
/* This bit causes them to float to the left in a vertical row of boxes */
float: left;
clear: both;
}
/* Increased height of the last box on the left */
#div1d {
height: 200px;
}
/* Main content box on the right. min-height can be changed as needed.
The margin makes room for the 3 boxes floating down the left side.
You read its properties as margin: top right bottom left; */
#div2a {
min-height: 365px;
margin: 0 20px 0 140px;
}
/* Generic margin/padding for all <div>'s */
div {
margin: 5px;
padding: 5px;
}
/* Remove the generic margin for #div1 */
#div1 {
margin: 0;
}
Demo of it in action.
<!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>
<style type='text/css'>
.mask{
position: relative;
overflow: hidden;
margin: 0px auto;
width: 100%;
background-color: #f4f4f4
}
.header{
float: left;
width: 100%;
background-color: #f4f4f4
}
.colleft{
position: relative;
width: 100%;
right: 84%;
background-color: #f4f4f4
}
.col1{
position: relative;
overflow: hidden;
float: left;
width: 82%;
left: 101%;
background-color: #e6e6e6
}
.col2{
position: relative;
overflow: hidden;
float: left;
width: 14%;
left: 3%;
background-color: #e6e6e6
}
.footer{
float: left;
width: 100%;
background-color: #b4caf7
}
body {
padding: 0px;
margin: 0px;
font-size: 90%;
background-color: #e7e7de
}
</style>
</head>
<body>
<div class="mask">
<div class="header">
DIV1A
</div>
<div class="colleft">
<div class="col1">
DIV2A
</div>
<div class="col2">
<div id="div1b">DIV1B</div>
<div id="div1c">DIV1C</div>
<div id="div1d">DIV1D</div>
</div>
</div>
<div class="footer">
footer
</div>
</div>
</body>
</html>