I have been sitting for a while to come up with a solution to a problem. I want to make a website that consists of three columns (left, center, right). These three will together cover the entire screen width. One column will consist of a fixed pixel value and the other two columns should be as wide that the middle column is centered on the screen.
The reason I need the left and right columns is because I want to hide things behind them, and then animate these things into the center column.
Anyone have a solution?
I'm not happy about the width: 10000% bit on this, maybe someone can come up with a cleaner solution but I think this will do what you're describing. These kinds of layouts are a little tricky when you're looking for a pure CSS solution.
HTML:
<div id="content">
<p>Content goes in here</p>
<ul>
<li>Whatever</li>
<li>Kind</li>
<li>Of</li>
<li>Content</li>
</ul>
<div class="sideCol" id="left"></div>
<div class="sideCol" id="right"></div>
CSS:
#content
{
width: 200px;
margin: 0 auto;
position: relative;
}
.sideCol
{
width: 10000%;
height: 100%;
position: absolute;
}
#left
{
background-color: red;
right: 200px;
top: 0;
}
#right
{
background-color: blue;
top: 0;
left: 200px;
}
http://jsfiddle.net/fLH9T/
HTML
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
CSS
.left { float:left; width:33%; height:200px; z-index:100; diplay:block; }
.center { float:left; width:33%; height:200px; z-index:1; diplay:block; }
.right { float:right; width:33%; height:200px; z-index:100; diplay:block; }
I assume this is what you want.
Related
I need to do a website top with some navegations tools.
It is working but I'm not confortable with. I think maybe it is not the right way to do these floating divs on the right.
I need an image on the left and two itens on the right of a full width div.
So I did:
<div id="menu">
<div id="logo">LOGO</div>
<div id="item">Settings</div>
<div id="item">Options</div>
</div>
and
#menu{
position:fixed;
width:100%;
height:50px;
background:#fff;
}
#logo{
float:left;
right:30px;
}
#item{
float:right;
right:30px;
margin-right:10px;
}
Is it ok with float right and everything else or should I change something?
jsfiddle
on #item the right:30px does nothing if you dont specify the postion. Use
#item{
float:right;
position:relative;
right:30px;
}
Flexbox...no need for floats or positioning at all....and the items are in the right order.
#menu {
position: fixed;
width: 100%;
height: 50px;
background: #fff;
display: flex;
}
.logo {
margin-right: auto;
}
.item {
margin-right: 10px;
}
<div id=menu>
<div class="logo">LOGO</div>
<div class="item">Settings</div>
<div class="item">Options</div>
</div>
I'm trying to understand CSS display: table. What happens when the cells/columns within the table don't make 100%? For example within the table in the JSFiddle:
.flag { max-width: 10%;}
.country_manager {max-width: 55%;min-width: 35%;}
.score1 { max-width: 5%;}
.score2 { max-width: 5%;}
At most that cover's 75% of the table width, so how is it decided where the remaining width goes?
In this JSFiddle I have blank cells at either side assuming one or both would take up the remaining space.
Without them, there isn't a lot of difference.
The reason I ask is that I'd like the country section to be slightly adjustable, and if it is smaller, I'd like the table contents to be centered with even spacing to either side.
I think this is no different from how browsers allocate width to actual table columns, and there is a prior question about this How is extra width in a table divided up among columns?. Alas, there is no good answer there either, but a link to further documentation.
Interestingly enough, this behaviour is inconsistent across two very good, standards-committed browsers -- Chrome and Firefox. Firefox appears to actually use the percentages you give, so if you have 75% of the width set in your containing elements, it'll only fill 75% of the table and center the elements in the middle. Chrome, on the other hand, will assume that the width is 100%, and represent the columns as filling the full width.
e.g. if you have two max-widths, both set at 5%, Firefox would show each at 5% width and have 45% empty each on the right and left. Chrome would be 100% full, and each element would be 50% width.
Based on the browser inconsistency alone, I'd avoid ever not letting them add up. Perhaps you could use a :before and :after pseudo-class to create a spacer area with the remaining with, and force it to be centered?
I would suggest using different code structure. You see, tables are useful in displaying chunks of data. But if you want to have a website layout I would split website into header / content / footer. And after that use divs with absolute positioning to represent those block you've shown
i think and test this css code.
<style>
.table {
margin-top:5%;
padding-top:5%;
padding-bottom:5%;
background-color: #ddd;
width: 70%;
height: 50%;
position: absolute;
display:table;
font-size: 2vh;
text-align: center;
overflow:hidden;
}
.row {
display:table-row;
width:100%;
height:40%;
}
.row_small {
display:table-row;
width:100%;
height:5%;
background-color: red;
padding:10px 0;
}
.blank {
display:table-cell;
}
.flag {
display:table-cell;
width:10%;
max-width:10%;
background-color: orange;
}
.country_manager {
display:table-cell;
max-width: 55%;
min-width: 35%;
}
.country {
display:table-cell;
width: 100%;
height:70%;
background-color: yellow;
float: left;
}
.manager {
display:table-cell;
height:30%;
width: 100%;
background-color: pink;
float: left;
}
.score1 {
display:table-cell;
width:5%;
max-width:5%;
background-color: blue;
}
.score2 {
display:table-cell;
width:5%;
max-width:5%;
background-color: green;
}
.title {
display:table-cell;
padding:10px 0;
color:#fff;
}
.ref_contain{
width: 100%;
position: absolute;
height: 15%;
}
.ref {
background-color: #800080;
color: #FFFFFF;
display: table-cell;
float: left;
padding: 10px 0;
position: absolute;
text-align: left;
text-indent: 133px;
width: 100%;
}
</style>
//write your html
<div class="table">
<div class="row_small">
<div class="blank">1</div>
<div class="title">2</div>
<div class="title">3</div>
<div class="title">AET</div>
<div class="title">Pens</div>
<div class="blank">blank1</div>
</div>
<div class="row">
<div class="blank">blank2</div>
<div class="flag">Flag</div>
<div class="country_manager">
<div class="country">Country</div>
<div class="manager">Manager</div>
</div>
<div class="score1">1</div>
<div class="score2">7</div>
<div class="blank">blank3</div>
</div>
<div class="row">
<div class="blank">blank4</div>
<div class="flag">Flag</div>
<div class="country_manager">
<div class="country">Country</div>
<div class="manager">Manager</div>
</div>
<div class="score1">1</div>
<div class="score2">7</div>
<div class="blank">blank5</div>
</div>
<div class="ref_contain">
<div class="ref">Ref</div>
</div>
</div>
I want to create a layout of 3 columns. The center has a fixed width (e.g. 500px). The sidebars need to have a fixed position, so that their content remains always visible. This content has to be floated close to the middle column.
Here is what I came up with so far. Unfortunately, I couldn't fix the sidebars. The code is replicated below.
HTML:
<div class="wrap">
<div id="pixelLeft">
<div id="pixelLeftContent">
Column 1 has to be fixed, with liquid width.
It's content needs to be floated to left;
</div>
</div>
<div id="bannerCenter">
</div>
<div id="pixelRight">
<div id="pixelRightContent">
Column 2 has to be fixed, with liquid width.
It's content needs to be floated to right;
</div>
</div>
</div>
<div style="clear:both;"></div>
CSS:
*{
margin:0;
padding:0;
}
#bannerCenter {
background:#ddd;
width: 500px;
float:left;
height: 1000px;
}
#pixelLeft {
background:#999;
width: calc(50% - 250px);
float:left;
}
#pixedLeftContent {
width: 50%;
float:right;
}
#pixelRight {
background:#999;
width: calc(50% - 250px);
float:right;
}
#pixelRightContent {
width: 50%;
float:left;
}
#pixelLeft, #pixelRight {
height: 400px;
}
Try something like this, i dont think css supports % and px together... it may solve your problem..
Modify Your css like this:
#pixelLeft{
width: 50%;
float:left;
position: relative;
}
#pixelLeftContent{
background:#999;
float: right;
margin-right: 250px;
}
I want the left column to be 40px. I want the center column to be 50% of the remaining viewport and I want the right column to be the other 50% of the remaining viewport.
It should look something like this:
[LEFTCOLUMN][...CENTER COLUMN...][...RIGHT COLUMN....]
[...40px...][........50%........][........50%........]
The solution presented here (link) will not work for my case as the center column can become too collapsed on mobile devices.
Thanks!
I think this may work for you:
http://jsfiddle.net/KR9zj/
Essentially the trick is to float LEFTCOLUMN, and wrap both CENTERCOLUMN AND RIGHTCOLUMN in a wrapper with overflow: hidden.
Use display:table; and display:table-cell;. No need to struggle with float:x;.
HTML:
<div id='container'>
<div id='first'>a</div>
<div id='second' class='fifty'>b</div>
<div id='third' class='fifty'>c</div>
</div>
CSS:
#container { display:table; width:100%; }
#container > * { display:table-cell; }
#first { width:40px; min-width:40px; }
#container .fifty { width:50%; }
Live example: http://jsfiddle.net/j25wK/
Will this work?
Demo: http://jsfiddle.net/BVhCZ/
As you can see, the left is absolute, and "remaining" is one block div that containing two 50% floated children. Should work for any width >~ 40px
Code:
<div class="left">LEFT</div>
<div class="content">
<div class="content-left">CONTENT LEFT</div>
<div class="content-right">CONTENT RIGHT</div>
</div>
.left {
position: absolute;
top: 0;
left: 0;
width: 40px;
background-color: #ddd;
}
.content {
margin-left: 40px;
}
.content .content-left {
float: left;
width: 50%;
clear: none;
background-color: #fdd;
}
.content .content-right {
float: right;
width: 50%;
clear: none;
background-color: #ddf;
}
I want to have in the same raw, in the left a logo, and in the right a menu like Contact Us. If I make 3 divs for this and I allign the first left, and the 3rd right, it doesn't work. How can you have this?
Float would be a clean, simple way to do it. Try floating your logo div left, and your menu div right, like so:
HTML:
<div id="navbar">
<div id="logo">Logo</div>
<div id="navmenu">Nav menu</div>
</div>
CSS:
div#logo {
float: left;
}
div#navmenu {
float: right;
}
Without any actual markup to look at, the following is a very simple three-column setup. This is not meant as a three-column page layout, only three columns stretching across the top. Note the use of float to send the DIV's to the same row, left to right*.
* You could set the last right. Also, you will have to clear as well for any content following the #menu-row DIV (this is the overflow: auto part).
CSS
#menu-row {
overflow: auto;
}
#menu-logo {
width: 10%;
float: left;
}
#menu-logo img {
width: 100%;
}
#menu-content {
width: 80%;
background: #ddd;
float: left;
}
#menu-right {
width: 10%;
height: 1.3em;
background: #dfd;
float: left;
}
#menu-content li {
display: inline;
list-style-type: none;
height: 128px;
}
#page-content {
background: #ddf;
}
HTML
<div id="menu-row">
<div id="menu-logo">
<img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
</div>
<div id="menu-content">
<ul>
<li>Home</li>
<li>About</li>
<li>Stuff</li>
</ul>
</div>
<div id="menu-right"></div>
</div>
<div id="page-content">
<p>This is stuff.</p>
</div>
http://jsfiddle.net/LYJUB/1/
I dont fully understand your question, but you might be able to fix it by positioning the divs absolute.
in the HTML: <div id="leftdiv"></div>
in the CSS:
#leftdiv{
width:10%;
height:100%;
position:absolute;
left:0%;
top:0%;
}
#rightdiv{
width:10%;
height:100%;
position:absolute;
right:0%;
top:0%;
}
#centerdiv{
width:80%;
height:100%;
position:absolute;
left:10%;
top:0%;
}