I want to combine a fixed and a fluid element. With <table> it is very easy, but I want tableless.
With table: http://jsfiddle.net/Tam7z/
But, how do this without tables, just with divs and CSS?
HTML:
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="80" class="a">FIXED</td>
<td class="b">FLUID</td>
</tr>
</table>
CSS:
table { background: #f4f4f4 }
.a { background: #CCC }
.b { background: #999 }
/* */
* { font-family: sans-serif }
td { padding: 5px }
p { color: #CCC; font-style: italic; margin-top: 40px; font-weight: 100 }
Like this: http://jsfiddle.net/NicoO/Tam7z/1/
This is a very simple way to layout things. But both elements may not be the same height by default. Also you can not verticaly align elements inside of this elements. You should be using a min-width for the body or parent item to prevent the fluid div from becoming too small.
#left
{
float: left;
width: 150px;
background-color: lightgray;
}
#right
{
margin-left: 150px;
background-color: gray;
}
HTML
<div id="left">Fixed</div>
<div id="right">Fluid</div>
Without using HTML tables, you could use CSS tables. Just set the parent element's display property to table. The children elements would then have a display of table-cell. The fixed row would obviously have a fixed width and the fluid table cell would fill the remaining space with a width of 100%. You can use vertical-align:middle to vertically center the .row elements too.
EXAMPLE HERE
<div class="table">
<div class="row fixed">FIXED..</div>
<div class="row fluid">FLUID..</div>
</div>
CSS
.table {
background: #f4f4f4;
display:table;
height:100px;
}
.row {
display:table-cell;
vertical-align: middle;
padding:0 20px;
}
.row.fixed {
background: #CCC;
}
.row.fluid {
background: gold;
width:100%;
}
This approach is well supported with the exception of IE7 and lower.
Related
I would like to use CSS to draw two boxes (red and green) of a certain size into a table cell. I can't get them to fill the full height of the table cell.
This is what I have so far:
td {
background-color: lightblue;
padding: 5px;
}
td.boxes {
padding: 0
}
div.a {
display: inline-block;
width: 3px;
background-color: red;
}
div.b {
display: inline-block;
width: 3px;
background-color: green;
}
<table>
<tr>
<td>Mj</td>
<td class="boxes">
<div class="a"> </div><!--
--><div class="b"> </div>
</td>
</tr>
</table>
Set tr & td.boxes element to display: flex and child div heights to 100%.
td.boxes,
tr {
padding: 0;
display: flex
}
Fiddle: https://jsfiddle.net/zx5Lvzym/
Use a gradient. the percents tell how far to color with each color. Thus 50% means up to the halfway point, and 51% means 51 onwards.
td {
background-color: lightblue;
padding: 5px;
}
td.boxes {
background: linear-gradient(to right, red 50%, green 51%);
padding: 0
}
<table>
<tr>
<td>Mj</td>
<td class="boxes">
Example Text Here
</td>
</tr>
</table>
Take a look on the JSFiddle. I don't know, how to display the numbers in one line and expand the div with the day 1 text ? Keep in mind that the numbers count can be different, so the div's width with the day 1 text must fit to the div's width which contains the numbers. Any ideas ?
HTML code:
<div class="day-cont left">
<div class="day-name center">day1</div>
<div class="less-n-cont">
<div class="number left center ">1</div>
<div class="number left center ">2</div>
<div class="number left center ">3</div>
<div class="number left center ">4</div>
<div class="number left center ">5</div>
<div class="number left center ">6</div>
<div class="number left center last-l-number">7</div>
<div class="clear"></div>
</div>
</div>
CSS code:
.day-cont {
width: 110px;
}
.left {
float: left;
}
.center {
text-align: center;
}
.day-name {
background: linear-gradient(to bottom, #FDFDFD 0%, #EAEAEA 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.less-n-cont {
width: 100%;
}
.day-name, .less-n-cont {
min-width: 200px;
}
.number {
background-color: #FFFFFF;
border-left: 1px solid #CCCCCC;
display: inline-block;
width: 40px;
}
.last-l-number {
border-right: 1px solid #CCCCCC;
}
.clear {
clear: both;
}
I want this as a result
To get your width as you require I would simply remove the width constraint on the outer container. This means that the container will expand to the total width of the objects it contains.
So from this:
.day-cont {
width: 110px;
}
To this:
.day-cont {
}
I have also fiddled with your code a little bit to improve it.
Instead of having to add a class to the last item, you can do the following:
.day-cont .number:last-child {
border-right: 1px solid #CCC;
}
Instead of having to add an extra </div> to clear things at the end you can extend the above method like so:
.day-cont .number:last-child:after {
content:" ";
display: block;
clear: both;
height: 0;
}
Fully updated fiddle here: http://jsfiddle.net/Tgyru/11/
Hope this helps.
You can use properties white-space and display:inline-block removing the float:
.day-cont {
display:inline-block;
width: auto;
}
.less-n-cont {
width: 100%;
white-space:nowrap;
}
The demo http://jsfiddle.net/Tgyru/8/
Just remove the below CSS from your code and try
.day-cont {
width: 110px;
}
You can remove your containers size, or set it to auto.
.day-cont {width: auto;}
either should work.
This approach might work for you:
.number {
background-color: #FFFFFF;
border-left: 1px solid #CCCCCC;
display: inline-block;
min-width: 32px;
padding-left: 3px;
padding-right: 4px;
}
To maintain the header "liquid", remove width: 110px; in .day-cont. Also I don't think you need min-width:200px in .day-name, .less-n-cont, as it will make the header bigger when you have less numbers.
try this:
<div>Day 1</div>
<div class="days">1</div>
<div class="days">2</div>
<div class="days">3</div>
<div class="days">4</div>
Now apply the CSS as
div {
min-width: 100%;
}
.days {
max-width: 18%; // just split them into pieces
display: inline; // show inline..
}
This way, the div with a class will be shown in a line and the other one will be left as it is.
And the width will be managed!
For you as mentioned by gvee: Remove the class day-count
http://jsfiddle.net/afzaal_ahmad_zeeshan/Tgyru/10/ Here is the code, I just removed the first class from the first div.
In this table, not just cell B has a heading and content, but also cells A and C.
My attempt to set the heading and the content using DIVs is only partially successful. font-weight is observed, but vertical-align is not. Why?
CSS
<style type="text/css">
td {
text-align: left;
}
.heading {
vertical-align: top;
font-weight: bold
}
.content {
vertical-align: middle;
}
</style>
HTML
<table width="300px" height="300px" border="1">
<tr>
<td rowspan="2">A</td>
<td>
<div class="heading">Heading of Cell B</div>
<div class="content">Content of Cell B</div>
</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
verticle align should be middle
verticle-align: middle;
This will place the text in the middle. Although you have to be aware that is places it in the middle on the line (not the container) so you need a line-height
line-height: xxx;
Or use div's and mimic a table: http://jsfiddle.net/rf2kC/
vertical align won't work on an element that is displayed in-line, like a div. you can put another table inside of your TD, or change your css to something like this:
<style type="text/css">
td {
text-align: left;
}
.heading {
position: relative;
top: 0;
background: blue;
height: 150px;
}
.content {
position: relative;
bottom: 0;
background: yellow;
height: 150px;
}
</style>
Try:
td {
text-align: left;
vertical-align:top;
}
.heading {
font-weight: bold;
}
.content {
margin: auto;
line-height: 200px;
}
http://jsfiddle.net/Xvx83/
I'm trying to write Firefox stylish css (full screen width style) for our StackExchange sites.
In the tagged question list page (eg: https://stackoverflow.com/questions/tagged/java ), the HTML is like the following
<div class='question-summary'>
<div class='statscontainer'>
<div>n votes</div>
<div>n answers</div>
<div>n views</div>
</div>
<div class='summary'>
<h3>Question title</h3>
<div>question excerpt ...</div>
<div>tag1 tag2 tagN </div>
</div>
</div>
The original CSS use fixed width on parent/child 1/child 2
<style>
.question-summary
{
float: left;
width: 730px;
background-color: silver;
}
.statscontainer
{
float: left;
width: 86px;
margin-right: 8px;
background-color: gray;
}
.summary
{
float: left;
width: 635px;
background-color: lightgray;
}
</style>
Now I try to override CSS to let it fit full screen width
.question-summary
{
float: left;
width: 100% !important; /* parent: full screen width */
background-color: silver;
}
.statscontainer
{
float: left;
width: 86px; /* child 1: fixed width */
margin-right: 8px;
background-color: gray;
}
.summary
{
float: left;
/*
width: 80% !important; <--- how to let child 2 has remaining width ?
left: 95px;
right: 0px;
*/
background-color: lightgray;
}
The question is, how to let child 2 has remaining width ? I know when using <table> to control layout, it is pretty easy.
<table style='width:100%'>
<tr>
<td bgcolor='gray' style='width:80px'>fixed width</td>
<td bgcolor='lightgray'>automatically has remaining width</td>
<tr>
</table>
Edit
According both #sandeep and #MrLister 's answers, it should override 3 CSS properties to get this work
.question-summary .summary {
width: auto !important; /* original = width: 735px; */
float: none !important; /* original = float: left; set to 'none' to get the 'overflow' property work */
overflow: hidden !important; /* original = not set, default is visible */
}
You should reset the width to its initial value, which is auto.
Edit:
As you noted though, in order for width:auto to work, you should also reset the float property, otherwise the width won't take up the rest of the available space.
Write like this:
.question-summary
{
background-color: silver;
overflow:hidden;
}
.statscontainer
{
float: left;
width: 86px; /* child 1: fixed width */
margin-right: 8px;
background-color: gray;
}
.summary
{
overflow:hidden;
background-color: lightgray;
}
Check this http://jsfiddle.net/pGu42/
I have a header bar that spans horizontally across my web page, which is comprised of one div tag and three nested div tags.
HTML:
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="rightTop">
RIGHT
</div>
<div id="centerTop">
CENTER
</div>
</div>
CSS:
#top-bar
{
margin: 0;
padding: 1px 4px;
font-size: x-small;
background-color: #005555;
font-family: Arial;
}
#top-bar .separator
{
padding: 0 7px;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
}
#leftTop
{
display: inline;
float: left;
}
#rightTop
{
display: inline;
float: right;
}
#centerTop
{
color: #ffffff;
text-align: center;
}
And it works just great, except for the fact that the div tags are out of order in the HTML code, which I don't like. If I order the div tags by placing them Left, Center, and Right, in the HTML, then the Right div just disappears from the webpage! I'm guessing that it has something to do with the float and text-align attributes having a conflict.
Anyone have any ideas on what is going on here, or is there an easier way to do this in CSS?
Try float: left; on #centerTop or display: inline on all three without any floats.
This works fine, but it depends on what you need. If you dont know the height of the content and you want it to expand dynamicly, then this is not enough:
#leftTop
{
float: left;
}
#rightTop
{
float: right;
}
#centerTop
{
float:left;
text-align: center;
}
I just tested the code from the original post in Firefox 3.0.10, Opera 9.64, IE8 and Google Chrome 2.0.181.1
All browsers showed all 3 divs, not a single div fell off the screen... Are you perhaps using IE6?
I am running your HTML and CSS of FF 3.0.10.
When you re-arrange the CENTERTOP div to be between the LEFTOP and RIGHTTOP divs, the RIGHTTOP div doesn't fall 'off the page' but the "RIGHT" text just falls off onto the next line.
My solution is proposed below (you'll notice I have some additions and some best-practice techniques).
HTML CODE:
<html>
<head>
<link rel="stylesheet" href="global.css">
</head>
<body>
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
<div class="clearer">
</div>
<div id="randomContent">
RANDOM CONTENT
</div>
</body>
CSS CODE:
#top-bar {
margin: 0;
font-family: Arial;
}
#leftTop {
float: left;
width: 20%;
border: 1px solid red;
}
#centerTop {
float: left;
width: 20%;
border: 1px solid blue;
}
#rightTop {
border: 1px solid green;
}
.clearer {
clear: both;
}
#randomContent {
background-color: yellow;
}
So you'll notice in the HTML that the divs are arranged in order from LEFT to CENTRE to RIGHT. In this CSS, this has been reflected by floating the LEFTTOP and CENTRETOP divs left. You will also notice that I have specified a width property on the LEFTTOP and the CENTERTOP divs, to enable you to space out your divs as wide as you want. (You'll be able to visually see your width modifications as I've added in a border on the divs). No width percentage property has been applied on the RIGHTTOP div as it will consume the remaining 60% of the width (after the LEFTTOP and CENTRETOP have consumed the 40%).
I have also added a CLEARER div. Think of the CLEARER div is a horizontal line break. Essentially it acts as a line of demarcations to separate the floated divs from the content below.
You can then add whatever content you want in the RANDOMCONTENT div.
Hope this helps :)
I don't know that it disappears, but it would drop down a line. Lot's of websites put it out of order for that reason (I know I do).
Another alternative:
#top-bar
{
margin: 0;
padding: 1px 4px;
font-size: x-small;
background-color: #005555;
font-family: Arial;
}
#top-bar .separator
{
padding: 0 7px;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
}
#top-bar>div
{
float: left;
width: 33%;
}
#rightTop
{
text-align: right;
}
#centerTop
{
color: #ffffff;
text-align: center;
width: 34%;
}
And then put <br style="clear:both"/> right before you close your top-bar div.
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
<br style="clear:both"/>
</div>
Not sure if you want the width's defined like this, however.
Another solution:
Set the leftTop, centerTop, and rightTop to display:table-cell,
Set the top-bar to display:table-row,
Set a container to display:table
Set the width of the container and row (#table-bar) to 100%;
Set the width of the columns to the desired ratios (e.g., 25% for left and right, 50% for center)
caveat: table, table-row, and table-cell css display values do not work in IE 5.5 or 6 (and maybe Opera 8); but they do work nicely in all contemporary browsers. IE conditionals can be used to split code for IE > 5 and IE < 7.
TEST:
<html>
<head>
<title>3 Column Header Test</title>
<style type="text/css">
body#abod {
background-color:#F5ECBD;
color:#000;
}
#hdrrow {
margin:0;
padding:0;
width:100%;
border:1px solid #0C5E8D;
display:table;
}
#top-bar {
margin:0;
padding:1px 4px;
width:100%;
font-size:100%;
background-color:orange;/*#005555;*/
font-family: Arial;
border:1px solid #000;
display:table-row;
}
#leftTop {
margin:0;
padding:0 16px;
width:24%;
text-align:left;
color:#000;
background-color:#F0DD80;
border:1px dashed #f00;
display:table-cell;
}
#centerTop {
margin:0;
padding:0 16px;
width:40%;
margin:0 auto;
text-align:center;
color:#000;
background-color:#F5ECBD;
border:1px dashed #f00;
display:table-cell;
}
#rightTop {
margin:0;
padding:0 16px;
width:24%;
text-align:right;
color:#000;
background-color:/*#F0DD80;*/transparent;
/*shows the orange row color*/
border:1px dashed #f00;
display:table-cell;
}
#footer {
padding:25px;
color:#000;
background-color:#F5ECBD;
}
</style>
</head>
<body id="abod">
<div id="hdrrow">
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
</div>
<h4 id="footer">Footer Lorem ipsum dolor sit amet</h4>
</body>
</html>
Use relative positioning to swap the positions of the divs after they have been floated:
The HTML
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
The CSS
#leftTop {
width:33%;
float:left;
}
#centerTop {
width:33%;
float:right;
position:relative;
right:33%;
}
#rightTop {
width:33%;
float:right;
position:relative;
left:33%;
}
I use the same process in my Perfect Liquid Layouts to change the column source ordering.