I've been trying to make a page which contains a column of 330px width at left and then an other column of 670px max-width that is centered at the remaining width of the page. Of course if screen width is too small to fit 1000px, the second column will be resized. How do I do that?
This is my current CSS Code:
#left {
float:left;
width:330px;
}
#right {
???
}
You can easily do this without calc or other nasty overly modern hacking. The following should even work fine in IE7, not sure about IE6 and its respect for margin:0 auto in nested elements but could even work:
HTML
<div id="layout">
<div id="leftcolumn">
Test
</div>
<div id="remainder">
<div id="rightcolumn">
Test
</div>
</div>
</div>
CSS
div {
color:white;
height:400px;
text-align:center;
}
#leftcolumn {
background:red;
float:left;
width:120px;
}
#remainder {
margin-left:120px;
}
#rightcolumn {
width:100%;
margin:0 auto;
max-width:300px;
background:green;
}
Fiddle supplied.
Related
I've got four divs. one container and three columns. Column 1 and 3 has a fixed width, and column two needs to fill the gab between them. I would like the design to be re-sizable depending on the screen width, to a minimum of 300px.
My HTML
<div id="container">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</div>
the CSS
#container {
width:100%;
min-width:300px;
position:relative;
}
#1 {
float:left;
min-width:300px;
min-height:10px;
background-color:red;
}
#2 {
overflow:hidden;
width:100%;
min-height:10px;
background-color:blue;
}
#3 {
float:right;
min-width:300px;
background-color:green;
}
Just remove width: 100%; from #2. It will automaticly take whole free space.
Check fiddle: http://fiddle.jshell.net/ozeczek/aVbC6/
Please can you check this example website. if I read the code well (just had a sight) it's setup with tables with some javascript so that a centered container can always stay at the center, and that the body has got two fluid color backgrounds which expands according to the screen size.
I was attempting to reproduce something like this but just using css, I am quite sure I could but can't figure how. please could you give me some indication/document to read.
i have designed a simple structure here in Jsfiddle,have a look
MARK-UP::
<div class="wrapper">
<div class="head_wrapper">
<div class="left_head">left</div>
<div class="right_head">right</div>
</div>
<div class="body_wrapper">
<div class="left_body">left</div>
<div class="right_body">right</div>
</div>
</div>
CSS ::
.wrapper{
overflow:hidden;
width:100%;
display:table;
}
.head_wrapper,.body_wrapper{
overflow:hidden;
width:100%;
padding:0px;
display:table-row;
}
.left_head,.left_body,.right_head,.right_body{
display:table-cell;
text-align:center;
vertical-align:middle;
}
.left_head{
background:black;
height:300px;
font-size:36px;
color:white;
}
.right_head{
background:blue;
height:300px;
font-size:36px;
}
.left_body{
background:yellow;
height:800px;
font-size:36px;
}
.right_body{
background:green;
height:800px;
font-size:36px;
}
.left_head,.left_body{
width:70%;
overflow:hidden;
}
You're just asking for horizontal centering, on a fixed-width container. This is easily done entirely in CSS. Simply set for your container (the element that wraps around your entire site):
.container {
width: 800px;
margin: 0 auto;
}
The "auto" will automatically even out the left and right margins (with no margin on top and bottom.)
[Edit: oops forgot a bit]
As for the blocks of colour, you can achieve this with a background image on your element, that's 1px wide and however tall you need. Just set it to repeat-x.
If your two sections have the possibility of having different heights, you can break it up, so that:
One container is full-width, and has the background colour. An inner container will then be fixed-width with auto margins as above;
Another container is full-width, and has the lighter background colour. An inner container will then be fixed-width with auto margins as above.
This means your code will be something like:
<div class="headercontainer">
<div class="header> This is my header </div>
</div>
<div class="maincontainer">
<div class="main"> This is rest of my copy. </div>
</div>
And your CSS:
.headercontainer { background-color: #222; }
.maincontainer { background-color: #444; }
.headercontainer .header,
.maincontainer .main { width: 800px;
margin: 0 auto; }
HTH :)
I have two <div>s side by side, in a two column layout. I want to make the second div width auto fit to the browser width... but my CSS isn't quite working:
<style>
#sidebar{
float:left;
width:230px;
min-height:10px;
overflow:hidden;
margin:auto;
}
#content{
float:left;
width:auto;
min-height:10px;
overflow:hidden;
margin:auto;
background-color:#cddfea;
}
</style>
<div id="sidebar">aa</div>
<div id="content"></div>
How can I make the width of the "content" div fit the rest of the browser window while my sidebar has a width of 230px?
Thank you. :)
Try this: jsFiddle
HTML:
<div id="sidebar">aa</div>
<div id="content">bb</div>
CSS:
#sidebar{
float:left;
width:230px;
min-height:10px;
overflow:hidden;
margin:auto;
background: #faa;
}
#content{
min-height:10px;
overflow:hidden;
margin-left:230px;
background:#cddfea;
}
I have two divs that I want to appear on top of each other. I was able to do this by setting the top in css. My problem is that now there is a big gap where the div used to be. I would like to get all of the subsequent content to float up and fill that gap.
You can see the fiddle here: http://jsfiddle.net/MzvC4/
Any suggestions on how to achieve this?
Should be able to do this:
#Navigation{
position:absolute;
margin-top:-250px; //or whatever px it is
}
http://jsfiddle.net/MzvC4/1/
Set your bottom margin to the same offset:
#Navigation{
margin-bottom: -249px;
}
You can do this without using any negative margins - if you simply change the position property to absolute, it will be taken out of the flow of elements, and other elements will move up to accommodate that. Then, to accommodate for the <body>'s 10px of padding, just apply top: 10px; to move it directly on top of your <div id="Carousel">. http://jsfiddle.net/MzvC4/4/
#Navigation{
position:absolute;
top:10px;
}
There is no need to use so many selectors. Just remember, use ID if the selector is used ONCE and class for repetitive, or common, styles. Here is the adjusted code:
Fiddle: http://jsfiddle.net/MzvC4/
The HTML:
<div id="carousel">
</div>
<div id="navigation">
</div>
<div id="tabs">
</div>
<div id="subtabs">
<div id="lefttab" class="subtabcontent">
<p>This is left tab content</p>
</div>
<div id="righttab" class="subtabcontent lasttab">
<p>This is right tab content</p>
</div>
</div>
And the CSS:
div{
border:1px red solid;
}
#carousel{
margin:0 auto;
width:985px;
height:249px;
background:blue;
}
#navigation{
margin:0 auto;
width:800px;
height:100px;
background:green;
}
#tabs{
height:113px;
width:800px;
height:50px;
margin-left: auto;
margin-right: auto;
background:yellow;
}
#subtabs{
margin:0 auto;
width:800px;
height:133px;
background:#ccc;
}
#lefttab, #righttab {
float:left;
margin:0;
width:370px;
height:133px;
background:#fafafa;
}
#righttab {
margin-left:56px; /* instead of #spacer */
}
.subtabcontent p {
/* place tab specific styles here */
padding:6px;
font-size:1em;
}
.lasttab {
font-size:2em;
font-weight:bold;
}
There is probably a simple answer, but I can't seem to figure it out.
Code:
<body>
<div class='left'>
</div>
<div class='right'>
</div>
</body>
I want .left to be width:100px and .right to be the remaining width of <body>, but for the life of me, I can't get it.
I have:
<style>
.left{
float:left;
width:100px;
}
body{
width:100%;
height:100%;
}
.right{
float:left;
width:85%;
}
</style>
But of course 85% won't fill <body>. Any suggestions? I know it's simple.
.right { margin: 0 0 0 100px; } /* remove the float and width */
This will not work if you have elements inside .right which clear, otherwise it will.