I have a web page that shows lots of tabular data and each of these tables needs to be placed on one horizontal line. I have mocked up an example below:
<html>
<style>
.outer{width:300px;height:300px;overflow: scroll;}
.inner{white-space: nowrap;}
.inline{float: left;}
</style>
<body>
<div class="outer">
<div class="inner">
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
<div class="inline"><table><tr><td>stuff</td></tr></table></div>
</div>
</div>
</body>
</html>
I am having problems that the inner div wraps the table divs unless I set it to have a large width such as 4000px. Is there a nice way of keeping all of the tables inline even if they exceed the size of the outer div with just css?
Change .inline{float: left;} to .inline{display:inline-block;}
http://jsfiddle.net/QLe5r/
Us this property:
white-space:nowrap;
This is because the float: left on divs "inline". Instead uses display: inline-block, (and display: inline for IE, I think. Check).
Why on EARTH do you have tons of tables inside tons of divs?!? That defeats the purpose of using tables for tabular data...when you are doing tabular data you should just use tables...not apply useless combinations.
Simply use one table and use <td>stuff</td> each time you have more data to add...td's are horizontal based anyway so you wouldn't even have to bother with css to have it extend.
Related
I am creating a web page and wanted to use a system similar to foundations/ bootstrap with defined columns and rows. I am happy with what I have so far, however I am not sure how I can center a column within a row, while still using a defined grid system.
I know usually the html is formatted like this:
<div class="column column-6 center">
http://codepen.io/Kiwimoose/pen/dpvEqO
Is what I have so far,
I am just not sure how the "center" tag is usually formatted in foundations. I would like to have the column in the second row centered, as well as others in the future.
Your code is OK, you just have to change the order in CSS:
.column {
position: relative;
float: left;
display: block;
}
.center {
margin:auto;
float:none;
}
Style .center class after . column class and it will work.
BTW, it is a good idea to clean up your code a little bit.
Try
<div align="center">
And then you can customize it in the css that you're doing
In Zurb foundation you can use "-offset-" and "end" class names,
for example
<div class="row">
<div class="large-6 large-offset-3 end columns">6 centered</div>
</div>
docs here
to center properly (with no headaches) with Twitter Bootstrap you can simply set empty divs as follows:
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6">
centered div in all resolutions
</div>
<div class="col-xs-3"></div>
</div>
Or you can use offset too
I have added the "clear:both;" css command to my responsive theme,however it doesn't work,elements wrap around my block.
Here is the HTML of my block:
<div id="block-views-categories-normal-view-block-1" class="block block--views contextual-links-region block--views-categories-normal-view-block-1">
<div class="contextual-links-wrapper contextual-links-processed">
<div class="block__content">
<div class="view view-categories-normal-view view-id-categories_normal_view view-display-id-block_1 view-dom-id-4d6cdd2580eef8f5826096ea0f8157c1">
<div class="view-content">
<div class="responsive-table-wrapper">
<div class="responsive-table-scroller">
<table class="views-view-grid responsive-table-processed">
etc
I have tried
#block-views-categories-normal-view-block-1{
clear:both;
}
and
.views-view-grid {
clear:both;
}
Am I missing something?
Need to see some more code and corresponding CSS to answer.
My guess is that you're not clearing the float of the proper element.
By putting clear: both on the table class, you're telling it to clear the float of some child table elements.
Unless you altered the display property of the table elements, your clear is in the incorrect place.
You need to clear the parent of your floats to fix the painting issue in the browser.
I have two float list one from the right and one from the left. The left float list is on top and the right on bottom. I want the right to be below the left like this:
However, my code produces this:
How can I force the left float list not to break? And why does it break anyway? This is my code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Floats dont like me.</TITLE>
<style type="text/css" media="screen">
.small { height:20px;width:65px;border:solid;float:left;margin-left:10px;margin- top:10px }
.smallR { height:20px;width:65px;border:solid;float:right;margin-right:10px;margin-top:50px; }
</style>
</HEAD>
<BODY>
<div style='width:300px;height:100px;border:solid'>
<div class='smallR' ></div>
<div class='small' ></div>
<div class='small' ></div>
<div class='small' ></div>
</div></BODY></HTML>
The reason it isn't working is likely because you have width: 300px; Change it to around 360px to see if it works then. IF it works, you can always lower the px till it works just how you want precisely.
<div style='width:300px;height:100px;border:solid'> // change the width to like 360px;
<div class='smallR' ></div> // if for some reason changing width: 300px to 360px; doesn't work then put this div as the last one
<div class='small' ></div>
<div class='small' ></div>
<div class='small' ></div>
//would put here if changing width don't work
</div>
Ok, so this should work.
DEMO
Now, why did it not work before?
Simple. It's because of the way you ordered your divs. Let's take a look at your original code:
<div style='width:300px;height:100px;border:solid'>
<div class='smallR' ></div>
<div class='small' ></div>
<div class='small' ></div>
<div class='small' ></div>
</div>
What is this asking the browser to interpret? It's asking for the very first div to be positioned as far right as possible and for the following three divs to fit in the line but be positioned as far left. Why doesn't it work? Because this is trying to fit all 4 divs in one line. It isn't able to because your very first div is already positioned at the far right, causing any div that won't fit on the left to be positioned one row down (this is also the reason why you had to use the margin-top to position that far right div).
Simple. Take a look at this code:
<div class="wrapper">
<div class='small'></div>
<div class='small'></div>
<div class='small'></div>
<div class='smallR'></div>
</div>
First, I replaced the ordering of the divs (this helps in the long run because it ensures that the first three will be on the first row, assuming you do not exceed the entire width of the container with the first three). Second, I alter the margin-top code, to position the div exactly where I want it, that way it does not touch any of the other divs. Here is the CSS code:
.smallR {
height:20px;
width:65px;
border:solid;
float:right;
margin-right:10px;
margin-top:10px;
}
And just like that, its done :) Now, if nothing made sense, please let me know because I can go further in depth with a few things. Also, I would suggest looking into the Almanac to give you some tricks of the trade :)
Basically I'm trying to create a simple webpage template which would contain 3 rows. The first being the header which contains two columns, the second just being the mainbody and then the last being a footer.
Coding wise i'm doing this kind of layout
<div id="wrapper">
<div id="header">
<header>
</header>
<div id="col2>
</div>
</div>
<div="mainbody"></div>
<footer></footer>
Basically the trouble I'm having now is in regards to the first row with the two columns. Basically I have a picture in the first one and a bunch of buttons on the second one. Ideally what I would like is to have the header at 100% width so it fits the screen and the contents of the first column stick to the left and the buttons to the right. With the blank space left inbetween the two. So the contents stick to the sides so to speak.
At the moment I'm using float:left on CSS for the first column, I've been messing around with float/align/position but I can't seem to get anything to work.
So any advice on that I would appreciate it.
I also had another question in regards to the footer, basically I have no idea how to even go about doing it. So just asking if possible and guidance where to look.
So for the footer I was wondering if it would be possible for it, if in between the footer and the browser x-axis there's white space it fits to the screen and the body would strech. Because as of now my body is only at the height of the contents within. So basically general advice on CSS to help implement the style so it fits to the screen.
Header with 2 columns
<div id="header">
<div id="column1" style="float:left;">Image</div>
<div id="column2" style="float:left;">Buttons</div>
</div>
Now add desired margin-left to second column div. It will create space in between 2 columns
<div id="wrapper">
<header>
<div id="column1" style="float:left;">Image</div>
<div id="column2" style="float:left;">Buttons</div>
</header>
<div class="mainbody">
Content
</div>
<footer></footer>
Use this
It is simple structure that can be created as follows (Here is DEMO)
HTML is
<div id="wrapper">
<div id="header">
<header><img src='http://www.topnews.in/files/facebook-yahoo.jpeg' height=200 />
</header>
<div id="col2"><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br>
</div>
</div>
<div="mainbody">mainbody
</div>
<footer></footer>
</div>
And CSS will be
#header{overflow:auto}
header{float:left}
#col2{float:right}
Hope it will help you :)
I have a container div, inside which I want to pack a variable number of divs of unknown (variable) height but with a given min-width. My requirements are:
If the container is wide enough to accommodate two columns, I want them to distribute themselves nicely in two columns without unnecessary whitespace.
It not, they should just go above each other.
Currently, I've given the divs width:48% margin-right:2%;float:left; which works nicely in the one-column state but when I resize the browser window, making room for two columns, every div which ends up in the left column insists on aligning itself horizontally with the bottom of the last div which went to the right:
what I have http://img602.imageshack.us/img602/5719/whatihave.png
This is how I would like them to go (no wasted space):
what I want http://img96.imageshack.us/img96/6985/whatiwantu.png
I would like a pure CSS solution if possible.
Thank you! /Gustav
EDIT:
This markup illustrates my problem:
<html>
<head>
<style type="text/css">
.box {
width: 48%;
min-width:550px;
margin-right:2%;
margin-bottom: 1.5em;
background:blue;
color:white;
height:180px;
float:left;
}
.tall {
height: 250px;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box tall">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div style="clear:both"/>
</body>
</html>
The .boxes are generated dynamically, and so are their heights, I just threw in one taller to illustrate.
I don't think you can achieve the desired effect with pure CSS. I've used jQuery Masonry to replicate the effect you're after and it worked really well.
I'd love to see a pure CSS solution for this but haven't seen anything come close yet.
I believe that if you have a div for each column into which you put the numbered divs you will get what you want. Something like this:
<div class="containerDiv">
<div class="column">
<div class="content">
1
</div>
<div class="content">
4
</div>
</div>
<div class="column">
<div class="content">
2
</div>
<div class="content">
3
</div>
</div>
</div>
The next step appears to be "how do I balance my columns". Some code somewhere is generating the boxes you mentioned. It is deciding on the height of each box. This code will need to generate a balanced list of boxes for each column prior to forwarding the request to the JSP for presentation. By balanced, I mean "the height of column1 is similar to the height to column2"