When you resize vBulletin you can see the 3 columns rescaling nicely (Board Name, Threads / Posts, Last Post).
How could you achieve something like that in CSS? When I try to do so it always overlaps each other. The .board-icon width needs to stay the same because there's an image inside.
This is my CSS
.board-icon {
float: left;
width: 55px;
}
.board-title {
float: left;
background: red;
width: 50%;
}
.board-info {
float: left;
background: green;
width: 120px;
}
.board-lastpost {
float: left;
background: orange;
width: 240px;
}
Here are some other examples using the same flexible layout:
http://punbb.informer.com/forums/
http://www.simplemachines.org/community/index.php
http://community.invisionpower.com/
The CSS behind it isn't that complex for modern browsers. Though some of these techniques will not work in earlier versions of ie without some modifications.
Using this HTML
<body>
<div id="canvas">
...
</div>
</body>
And this CSS
body {
margin:0;
padding:0;
position:relative;
}
#canvas, .main-width {
min-width:960px;
width: 80%;
margin:0 auto;
}
.clear, #canvas:after {
clear: both;
height: 0;
visibility: hidden;
#canvas:after {
content: ".";
display: block;
}
Start working with % widths, not px widths as you have in your example. The only time to use fixed width values should be on a min-width delcaration.
You could create two fluid columns inside your canvas div for example
<div class="col1>
...
</div>
<div class="col2">
...
</div>
<br class="clear" />
And the CSS (no need for min-widths now as 34% of 960px is just as good)
.col1,.col2 {
float:left;
}
.col1 {
width:34%;
}
.col2 {
width:66%;
}
Notice the .main-width declaration above? That applies the #canvas style to any container in the #canvas div, giving it exactly the same width and fluidity.
<div class="main-width"> ... </div>
That should set you on the right tracks, just remember that you need to work in % not px. If you need to use borders on elements, make sure they are display:block to maintain positioning with % widths.
Related
So I have a page for displaying products, and I'm trying to convert that page from a table-based layout where each spot is a table cell, three to a row, into a dynamic grid of some sort.
Unfortunately, using inline-block is a pain due to the "keep whitespace like it matters between inline-block" issue, and using floats is... ok, but tends to result in gaps in the listings (see attached image).
The tiles have a max and min width, so it seems like waterfall or pinterest type tiling shouldn't necessary, since I'm not really dealing with variable-height and width rectangles.
So what techniques are best for making this kind of grid listing fill available space regularly, but still allow rows to be shorter for shorter screens?
There's an in-development example of the problem page here: http://www.shermanbrothers.com/catalog.php
the technique is called Liquid design or if you have to support smart phones and tablets, then it will be "Responsive design".
In your scenario, first you need to turn the fixed-width table to a liquid grid. The code snippets are:
JsFiddle
CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: auto;
}
.container:after {
content: " ";
clear: both;
display: table;
}
.tabletContainer {
/*The total width for the first two column*/
width: 67%;
float: left;
display: block;
}
.left {
background-color: red;
float: left;
/*Each column takes have of the container size, so their width =67/2 = 33.5%*/
width: 50%;
}
.middle {
background-color: yellow;
float: right;
/*Each column takes have of the container size, so their width =67/2 = 33.5%*/
width: 50%;
}
.right {
float: right;
width: 33%;
background-color: blue;
}
/*For tablet devices, show only the two columns in a row and a column underneath*/
#media (min-width: 481px) and (max-width: 768px) {
.tabletContainer, .right {
float: none;
width: auto;
}
.right
{
clear: both;
width: 50%;
}
}
/*For mobile phones, show only one column*/
#media (max-width: 480px) {
.tabletContainer, .left, .right, .middle {
float: none;
width: auto;
display: block;
}
}
HTML
<div class="container">
<div class="tabletContainer">
<div class="left">It is well enough that people of the nation do not understand our banking and monetary system, for if they did, I believe there would be a revolution before tomorrow morning.
</div>
<div class="middle">Under capitalism, man exploits man. Under communism, it's just the opposite.
</div>
</div>
<div class="right">One of the funny things about the stock market is that every time one person buys, another sells, and both think they are astute
</div>
</div>
You also need to make your images liquid as well. One trick is to remove the fixed-widths and heights of your images.
CSS
/*Make images not resize outside of the column that they are in*/
img {
max-width: 100%;
}
HTML
<img src="imgs/clouds.jpg" alt="Clouds" class="half right"/>
You can also change the image size by using %. For instance, the width of the image in the example above will be set to 50% of the container width by using the following CSS.
img.half {
max-width: 50%;
}
If you want to float it to the left of the container:
img.left {
float: left;
margin: 0 10px 10px 0;
}
By applying padding/margins you can achieve the effect you want.
Hope this help.
I know this questions has already been answered before and I've read the topics :
Make div take all space left after another div
Expand div to take remaining width
Expand div to max width when floatleft is set
The magic of overflow hidden (external)
However I can't manage to implement them in my case or they simply don't seem to work as I try to have a fix width on the right and a flexible width on the left (unlike the above examples).
Here is my problem (which is fairly simple) : I have a form with a search field (left) and a span element (right). The span element has a fixed width and height. I want the input to fit the remaining left space.
form :
<div id="container">
<form>
<input type="search" />
<span class="submit"></span>
</form>
</div>
style.css :
#container {
width: 300px;
}
[type="search"] {
/* Positionning
* ------------ */
display: block;
height: 40px;
padding: 0px 10px;
vertical-align: top;
}
.submit {
/* Positionning
* ------------ */
display: block;
height: 40px;
width: 50px;
/* Styling
* ------- */
background-color: #CF0526;
}
From what I've read, I thought that a width: 100%; overflow: hidden on the input and a float: right on the span who be enough, sadly not. Here is a jsfiddle of my problem, hopefully it may help you.
EDIT: I changed the title from "left div" to "left input" as it may matter, especially since this solution does not work while it looks accurate for divs positionning.
You can try with the property calc like this:
input[type="search"] {
width: calc(100% - 40px);
margin:0;
padding:0;
height:30px;
float:left;
}
.submit {
float:left;
width: 40px;
height: 30px;
background-color: red;
}
The demo http://jsfiddle.net/SL3FB/10/ ... Maybe a problem the compatibility
Another solution using box.sizing who has more compatibility: http://jsfiddle.net/SL3FB/18/
You can substract the width from the span to the width from the textfield which is 100%.
Here is the fiddle http://jsfiddle.net/SL3FB/15/.
Code is like this:
width:calc(100% - 50px);
float:left;
Make 'em both float:left; to have a better result!
Hope this works for you.
Use CSS Tables
1) Set display: table-cell for both the input and the span
2) Set a fixed width on the span and (the trick:) width:100% on the input
FIDDLE
#container {
width: 300px;
border: 1px solid black;
}
form
{
display:table;
width: 100%;
}
.submit {
display:table-cell;
width: 40px;
height: 30px;
background-color: red;
}
input
{
width: 100%;
display:table-cell;
}
Does this work for you?
http://jsfiddle.net/SL3FB/4/
I've given your search a width of 85% so it fits up agains the red box.
.search {
width:85%;
}
im making a self financial accounting program but im gonna use html,css and php to do it
i have a basic layout with 5 main divs on the front page
here it is the mock:
http://s24.postimage.org/le9yrx4np/divs.jpg
i never coded before and im failing hard
i want this layout compatible with "desktops" this is my desktop version
im working based on a 1024 x 768 screen
but i want webkits compatible for all browsers because i want this able to resize if its a little bigger or smaller
im not sure if need em since i can just set things to like 100% but thats where my problem starts
here is my work so far
http://jsfiddle.net/dhJPS/
my prblems are
the middle three divs are being overlapped by the right div, notice on the words how they are not centered from the left div to the right div
i cant seem to understand the concept of floating to well i cant make this layout work like i want
anyways if you can help me out a little with this one is greatly appreciated!!
thanks
#leftside {
background-color: blue;
width: 170px;
height: 770px;
float: left;
}
#intab {
background-color: yellow;
width: 100%;
height: 297px;
}
#currentday {
background-color: white;
width: 100%;
height: 170px;
}
#outtab {
background-color: yellow;
width: 100%;
height: 297px;
}
#rightside {
background-color: black;
height: 770px;
width: 200px;
float: right;
margin-top: -765px;
}
* {
margin: 0px;
padding: 0px;
list-style-type: none;
}
body {
text-align: center;
display: block;
}
img {
border: none;
}
You simply need to rearrange some things.
When floating something to the right, the HTML always need to come before any other HTML. Right, left, static is the best order to follow.
You always want to cascade your CSS. Put global styles at the top of the style sheet. The body styles should be at the top of your CSS, not the bottom.
I added a wrapper div to set a minimum width. This way the interior content will never go below that width, ensuring things never overlap. However they will expand as much as needed.
It is rare you need to set width: 100%; in the CSS. It's not always a bad thing, but you shouldn't bother setting that unless you specifically know you need it.
I rearranged some things, and removed some of the HTML that jsFiddle don't need.... UPDATED FIDDLE HERE
Here is your answer.
Key issues:
margin
inner div to group all the central ones
[VERY IMPORTANT] display: inline-block; - This will make sure that your div will be the exact size you defined. if not used it will use 100% for both width and height
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.panels {
height: 768px;
}
.rightside, .leftside {
width: 170px;
height: 100%;
background-color: yellow;
display: inline-block;
}
.leftside {
float: left;
}
.rightside {
float: right;
}
.innerPanels {
height: 100%;
margin: 0 170px;
}
.intab, .outtab {
height: 25%;
background-color: lime;
opacity: 0.75;
}
.currentday{
height: 50%;
background-color: darkgray;
}
</style>
</head>
<body>
<div class="panels">
<!--LEFT SIDE -->
<div class="leftside">left side</div>
<!-- RIGHT SIDE -->
<div class="rightside">right side</div>
<div class="innerPanels">
<!-- IN -->
<div class="intab">in</div>
<!-- CURRENT DAY -->
<div class="currentday">current day</div>
<!-- OUT -->
<div class="outtab">out</div>
</div>
</div>
</body>
</html>
This is my CSS code;
#wrap {
width:50em;
max-width: 94%;
margin: 0 auto;
background-color:#fff;
}
#head {
width:50em;
height:10em;
max-width: 100%;
margin: 0 auto;
text-align:center;
position: relative;
}
#css-table {
display: table;
margin: 1em auto;
position: relative;
width:50em;
max-width: 100%;
}
#css-table .col {
display: table-cell;
width: 20em;
padding: 0px;
margin: 0 auto;
}
#css-table .col:nth-child(even) {
background: #fff;
}
#css-table .col:nth-child(odd) {
background: #fff;
border-right: 4px double #b5b5b5;
}
And my HTML code;
<div id="cont">
<div id="css-table">
<div class="col">123</div>
<div class="col">123</div>
</div>
</div>
When I scale the Firefox window, the table scales fine even down to 300px width viewport...just like I want to. But in Chrome, the table looks normal only when the viewport is wider than 50em. If I narrow the Chrome window, the table bleeds out on the right side of the wrap.
Is there a reason why is Chrome doing this?
Technically Chrome is following the rules because max-width should only apply to block elements.
From MSDN docs:
The min-width/max-width attributes apply to floating and absolutely
positioned block and inline-block elements, as well as some intrinsic
controls. They do not apply to non-replaced inline elements, such as
table rows and row/column groups. (A "replaced" element has intrinsic
dimensions, such as an img or textArea.)
The table (or in your case display:table) should technically not work or be supported. FF apparently obeys it fine, but you'll probably need to come up with another solution, either removing the display:table or the max-width.
max-width property
MSDN Doc
The solution I found was using table-layout: fixed and width: 100%
Create a div and give it a styling to display block and a max width. You may use traditional <table> and give it a styling of 100% width.
I was able to use a mixin(SASS) to fix the issue.
#mixin clearfix {
&::after{
content: "";
display: table;
clear: both;
}
}
I want to set vertical alignment of image inside a div. I use img { vertical-align:middle}
but it is not working.
Using the line-height property will solve the problem:
<style>
.someclass {
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
border: dotted;
}
.someclass img {
margin: auto;
vertical-align: middle;
}
</style>
<div class="someclass">
<img src="someimg.jpg" border="0" alt="">
</div>
This is a solution that doesn't require JavaScript (as my previous solution did).
You can achieve what you want by assigning display: table-cell to the containing div. Here's an example: http://jsbin.com/evuqo5/2/edit
I feel I must warn you that you will need to test this in every browser you intend to support. Support for the table-cell value is fairly new, particularly in Firefox. I know it works in Firefox 4, but I don't know about any of the 3.x iterations. You'll also want to test in IE (I've only tested in Chrome 10 and Firefox 4).
The CSS:
div#container {
width: 700px;
height: 400px;
position: relative;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
}
div#container img {
margin: 0 auto;
display: block;
}
You won't need the div#container img styles if you don't also want to horizontally align the image.
If you're trying to do what I think, vertical align isn't going to work; you'll need to use positioning.
In general, position the container relative, and then position the image absolute, with top and left set to 50%, and then move the image back to the center by setting negative margins equal to half the width / height.
Here's a working example: http://jsbin.com/evuqo5/edit
Basic CSS is this:
#container { position: relative; }
#container img {
position: absolute;
left: 50%;
top: 50%;
margin-top: /* -1/2 the height of the image */
margin-left: /* -1/2 the width of the image */
}
See this awser: How to vertical align image inside div
If you want to align horizontally also, add the right and left, like this:
div {
position:relative;
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
The following post has some useful references:
Text Alignment w/ IE9 in Standards-Mode
Also, depending on which version of IE you are testing against, you may end up needing some browser-specific hacks or some jQuery/JavaScript code.
If you have to, use a one-row-one-cell table and take advantage of the vertical-align property. This is brute-force, not overly semantic, but it works.
If you set the div display attribute to table-cell then vertical-align: middle; will work.
The vertical-align rule only affects table cells or elements with display: table-cell.
See this article from SitePoint for a detailed explanation.
<style>
/* change body to .someClasses's parent */
body {
width: 100%;
height: 100%;
display: table;
}
body > .someclass {
width: 300px;
height: 300px;
text-align: center;
border:dotted;
margin: 0 auto
display: table-cell;
vertical-align: middle;
}
</style>
<body>
<div class="someclass">
<img src="someimg.jpg" border="0" alt="">
</div>
</body>