Just to keep my front-end web dev skills current, I decided to create a "sandbox/playpen" website based on the the fictional LCARS user interface familiar to fans of Star Trek. Here's the link.
http://www.king-con.com/sto/console/
If you take a look, you may notice that the some of the sub sections (views) have trek-ish looking headers, the basic HTML for which is:
<div style="display:table;width:100%">
<div style="display:table-row;">
<div style="display:table-cell;width:15px;background-color:somecolor;border-radius:10px;">FIXED WIDTH (15px)</div>
<div style="display:table-cell;">WIDTH VARIES WITH HEADER TEXT</div>
<div style="display:table-cell;background-color:somecolor;border-radius:10px;>WIDTH EXPANDS TO FILL REMAINING SPACE</div>
</div>
ATM, I'm using a server-side function to write out those headers. It simply takes one argument (the text) and writes out the HTML based on the character length of the text.
You may also notice it isn't really working, that is it doesn't do a very precise job of guesstimating the actual pixel-width of the header text, and sizing the divs accordingly.
I'm wondering if there isn't a client-side, perhaps jquery-based method for precisely guaging the pixel-width of the various header captions.
Thanks in advance for any ideas.
I believe your best bet is to do all of the styling client side with CSS rather than trying to calculate the text width on the server.
HTML:
<div class="container">
<span class="fixed">FIXED WIDTH (110px)</span>
<div class="varies">WIDTH VARIES WITH HEADER TEXT</div>
<div class="right">WIDTH EXPANDS TO FILL REMAINING SPACE</div>
</div>
CSS:
.container {
overflow: hidden; /* clear the float */
}
.fixed {
height: 50px;
width: 110px;
vertical-align:middle;
float: left;
border-radius:10px;
background-color:red;
}
.varies {
height: 50px;
float: left;
border-radius:10px;
background-color:green;
}
.right {
height: 50px;
overflow: hidden;
background-color: blue;
border-radius:10px;
}
Based on this answer: How to make an inline-block element fill the remainder of the line?
Fiddle Here: http://jsfiddle.net/YRDCF/
Related
I have been trying to build a website having a 3 column layout. All of the body is given a margin:0 auto to keep it at the centre, and has a minimum width of 1218px.
Now, what I want to do is reposition the right column in such a way the it goes below the left column without affecting the centre column. A live example would be twitter home page, where at the left I can see my profile and trends, the centre column features the tweets and the right column shows suggestions on a 1366x768 screen, now if I change the screen size to 1024x768, the column of suggestions at right goes down below the left column but the central timeline is unaffected.
The definition would be:
<div class="containter" style="margin:0px auto;">
<div class="left-col" style="width:290px; float:left;">Left Stuff goes here </div>
<div class="center-col" style="width:590px; float:right;"> Center body </div>
<div class="right-col" style="width:290px; float:right;">right Stuff goes here </div>
</div>
Now note that the central column has a right float, copied from twitter.
I can't use media queries for that since the website is going to deal with a lot of old browsers and also I would like to avoid JavaScript if possible.
Any help?
You can't do that with "min-width" of the main container. You must use "max-width" since you want to make sure something happens when the screen width gets more narrow. And the main column (in the center) has to be left-floated, not right. Here's a possible solution. However the whole questions seems weird to me since you want to make a responsive layout in an old browser that doesn't support responsive CSS.
<style>
.container {
max-width: 1218px;
}
.leftColumn {
float: left;
width: 300px;
height: 500px;
background-color: brown;
}
.mainColumn {
float: left;
width: 700px;
height: 500px;
background-color: darkgreen;
}
.suggestions {
float: left;
width: 218px;
height: 500px;
background-color: darkorange;
}
.cleaner {
clear: both;
}
</style>
<div class="container">
<div class="leftColumn">
LEFT
</div>
<div class="mainColumn">
MAIN
</div>
<div class="suggestions">
SUGGESTIONS
</div>
<div class="cleaner"></div>
</div>
I'm using the latest version of Zurb Foundation. I'm wanting to use full width layout and make use of the off canvas element.
So I have a demo highlighting the issue, however I want full width rows but still be able to surround that row with a full width background colour. (E.g http://foundation.zurb.com/) like the hero block.
For simplicity this is the code in question:
HTML
<section class="content-block">
<div class="row full-page">
<div class="large-12 columns">
<h3>We’re stoked you want to try Foundation! </h3>
<p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
<p>Once you've exhausted the fun in this document, you should check out:</p>
</div>
</div>
</section>
CSS:
.full-page {
min-width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
.content-block {
background:#000;
}
I would expect that the full width of the page would be black.
This happens because on the .columns elements they use float. This make the element out of the flow, thus does not size on it's content anymore(because the content isn't in the same flow and just overflows).
To force the element to stay in the same flow, you can use:
.full-page {
min-width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
overflow: hidden;
}
jsFiddle
I'm just trying to put a div next to the other. I've found 2 different ways. You have them here below. But I don't know what of them is more correct..
<html>
<head>
<style type="text/css">
.jander1{
width: 100px;
height: 100px;
float: left;
border: 5px solid;
}
</style>
</head>
<body>
<div class="jander1">jander1</div>
<div class="jander1">jander1</div>
</body>
</html>
<html>
<head>
<style type="text/css">
.jander1{
width: 100px;
height: 100px;
float: left;
border: 5px solid;
}
.jander2{
width: 100px;
height: 100px;
margin-left:100px;
border: 5px solid;
}
</style>
</head>
<body>
<div id="container">
<div class="jander1">jander1</div>
<div class="jander2">jander2</div>
</body>
</html>
Javi
Floating both is simpler, and means that you don't have to be careful if you add more elements next to the first two. Floating just one is more unusual, more often used when you want actual float effects (like text wrapping around the floated element).
As krs1 said, you'll probably want to use some method to clear your floats. The easiest way is to have a containing element (as in your second example), and to apply either overflow: hidden or overflow: auto to it. This can have side effects (if content from the boxes overflows), but does not complicate your markup.
#container { overflow: hidden; }
#container div { width: 100px; height: 100px; float: left; }
First of all, think about your content. The markup of your content should reflect your content; don't let CSS determine the class attributes you use. The nature of that content also affects what CSS you should be using.
Case 1: Different content in the 2 <div> elements
If we're talking about different content between the two <div> elements, such as an image and some text...
<div class="profile-picture"><img src="http://www.gravatar.com/avatar/0be84773790974af8d6a1d5d55801736?s=128&d=identicon&r=PG" alt="Profile picture for Richard" class="" /></div>
<div class="about-me">My name is Richard and I work as a software developer!</div>
... use different classes. The neither is a jander so don't include jargon class attributes to accomodate your CSS. Class attributes are element identifiers and should make semantic sense.
Case 1.1: The Left <div> has a fixed width
Once you get to your CSS, in a case like this one, the image has a fixed width which probably isn't subject to a lot of change; as such you can use technique #2 from your question to give the second <div> a margin-left:
.profile-picture {
width:80px;
height:80px;
float:left;
}
.about-me {
margin-left:81px;
}
Here is a JsFiddle example.
Case 1.2: The Left <div> has a variable width
But what if we need that image to some times be bigger, sometimes be small? What if we don't have knowledge of the image's size when we're writing our CSS?
<div class="profile-picture"><img src="http://media03.linkedin.com/mpr/mpr/shrink_80_80/p/1/000/09a/108/11e3bdd.jpg" alt="Profile picture for Richard" class="" /></div>
<div class="about-me">My name is Richard and I work as a software developer!<br />blah<br />blah<br />blah<br />blah<br />blah</div>
<div class="profile-picture"><img src="http://www.gravatar.com/avatar/0be84773790974af8d6a1d5d55801736?s=128&d=identicon&r=PG" alt="Profile picture for Richard" class="" /></div>
<div class="about-me">My name is Richard and I work as a software developer!<br />blah<br />blah<br />blah<br />blah<br />blah</div>
... one of those images is 128px tall and the other is 80px tall.
We can then float the first <div> while simply targeting the other with anoverflow-x:hidden;`:
.profile-picture {
float:left;
}
.about-me {
overflow-x:hidden;
}
Here is another JsFiddle example.
Case 2: Similar content in the 2 <div> elements
Then by all means give them the same class attributes!
<div>
<div class="column">Here is content for column 1!</div>
<div class="column">Here is content for column 2!</div>
</div>
If they are supposed to behave identically, target them with the same rules and float them both to the left. If they don't behave identically, you can generalize the considerations above; do you know how wide that first <div> should be? If so, go ahead and use the margin-left. Otherwise use overflow-x.
If they work, they work. Option 1 looks good, I've run similar patterns before.
However you're going to run into issues if you attempt to put a block element beneath floating elements. After the second 'jander' class element add this:
<div style="clear:both"></div>
Since both div share styling, I would go with the first example. I would also add a clear:both to your #container since it is wrapping the two divs which are floating left.
Since you have a margin-left in your 2nd div only, I would either use a pseudo-class like #container div:first-child or an id/class to add the margin.
I understand that there are several questions here about this problem, but I have a rather unique predicament. I'm working on a template that has to include certain tags, and has to work with other elements that are added to the template after I upload the code. I wouldn't worry about this, but I am having a time trying to get the footer to display at the bottom of the page. I can't alter anything about the footer, and it displays at the bottom of the div I'm using as a wrapper. The problem is if I set the height to a fixed value, there can only be so many comments made before the comment div overlaps the footer. I've tried several different solutions including setting the container div's height to auto, overflow to auto, bottom margin to 65 (height of the footer), and setting the overflow to scroll for the Comments div (resulted in very loose comments).
Here is an example of the problem and the template as it stands.
Here is the CSS styling for the container div (div id=Main)
#Main {
margin: 0px auto auto auto;
background-color: #808080;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: medium;
font-variant: normal;
color: #FFFFFF;
width: 900px;
position: relative;
}
Here's the CSS styling for the Comments div
#Comments {
background-color: #008080;
width: 450px;
height: auto;
top: 1750px;
left: 450px;
position: absolute;
overflow: auto;
}
And here's how the divs are stacked in the body
<div id="Main">
...
<div id="Comment_Form">
<!--[COMMENT_FORM=400,200]-->
</div>
<div id="Comments">
<!--[COMMENTS=400]-->
Comments
</div>
</div>
Since the page is going to be image heavy, I'm trying to keep the code lightweight (and probably failing at it pretty badly).
Thank you for your help and I'll post the template as of now if anyone needs it.
EDIT:
Okay, it's occurred to me that a) I need to redo the CSS and the divs that I have down, and b) I have no clue how to do it using pure CSS, or at least with out fighting it as one of you has said. What I'm trying to achieve is this:
I have no clue How to do this. and any help would be greatly appreciated (as well as any way to avoid having each and every element in its own div)
You seem to be really fighting your CSS on that page. Most of your elements are positioned absolutely within your #Main class. This will force you to specify a lot more layout than you really want to. It also means that if you have a variable quantity of comments or dynamic content, you'll find it that much harder to expand your content containers without others getting in the way.
I would strongly urge you to look at CSS frameworks or approaches that take advantage of grid layouts such as Nicole Sullivan's OOCSS framework.
You'll find that the structure (which has plenty of good, workable examples) is easy to follow and lends itself much more readily to the sorts of layouts that you're trying to achieve.
I hope this is helpful.
Here is a very basic layout that you can use.
In your CSS:
#header, #content, #comments{
margin: 0 auto;
width: 960px;
overflow: hidden;
}
#author-comments{
width: 100%;
}
#comment-box{
float: left;
width: 50%;
}
#comment-list{
float: right;
width: 50%;
}
In your markup:
<div id="header">
Header
</div>
<div id="content">
Contents
<div>
<div id="comments">
<div id="author-comments">
Author comments
</div>
<div id="comment-box">
Comment box
</div>
<div id="comment-list">
Comment list
</div>
</div>
It's really important that you use markup that makes sense without the styles. Don't see divs as plain boxes but as actual content containers that give structure to your document.
On a side note, you mentioned that you were concerned about the ammount of divs to keep your file light, compensating for the amount of images you're using. Don't worry about this. Text documents (such as HTML) are nothing compared to images in terms of file size. However, his doesn't mean you should throw markup as if it was free ;)
One last thing. I noticed that you are using <img> elements to render your decoration images. Try using CSS to set them as background images in the corresponding <div>s. This not only will help you to make cleaner and easier to implement structures, but also will draw a line between the images that represent content and those that represent decoration.
I'll write without any testing how I would code the layout on your image:
HTML:
<div id="header" class="centered"></div>
<div id="content" class="centered">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="comments" class="centered">
<div id="author-comments" class="centered"></div>
<div class="centered">
<div id="comment-field"></div>
<div id="user-comments"></div>
</div>
</div>
CSS:
* { margin:0px; padding:0px }
html { height:100% }
body { height:100% }
.centered { position:relative; margin:0 auto; width:960px }
#header { height:100px; background:#333 }
#content { overflow:hidden }
#author-comment { overflow:hidden; margin:30px auto }
#comment-field { position:relative; float:left; width:480px; overflow:hidden }
#user-comments { position:relative; float:left; width:480px; overflow:hidden }
Sorry, got no time to test now, but on first view, I don't see any problems with this code - write comments, if something doesn't work
My only problem is making them line up three-across and have equal spacing. Apparently, spans can not have width and divs (and spans with display:block) don't appear horizontally next to each other. Suggestions?
<div style='width:30%; text-align:center; float:left; clear:both;'> Is what I have now.
You can use divs with the float: left; attribute which will make them appear horizontally next to each other, but then you may need to use clearing on the following elements to make sure they don't overlap.
You can use
.floatybox {
display: inline-block;
width: 123px;
}
If you only need to support browsers that have support for inline blocks. Inline blocks can have width, but are inline, like button elements.
Oh, and you might wnat to add vertical-align: top on the elements to make sure things line up
My answer:
<style>
#whatever div {
display: inline;
margin: 0 1em 0 1em;
width: 30%;
}
</style>
<div id="whatever">
<div>content</div>
<div>content</div>
<div>content</div>
</div>
Why?
Technically, a Span is an inline element, however it can have width, you just need to set their display property to block first. However, in this context, a div is probably more appropriate, as I'm guessing you want to fill these divs with content.
One thing you definitely don't want to do is have clear:both set on the divs. Setting it like that will mean that the browser will not allow any elements to sit on the same line as them. The result, your elements will stack up.
Note, the use of display:inline. This deals with the ie6 margin-doubling bug. You could tackle this in other ways if necessary, for example conditional stylesheets.
I've added a wrapper (#whatever) as I'm guessing these won't be the only elements on page, so you'll almost certainly need to segregate them from the other page elements.
Anyway, I hope that's helpful.
you can do:
<div style="float: left;"></div>
or
<div style="display: inline;"></div>
Either one will cause the divs to tile horizontally.
I would do it something like this as it gives you 3 even sized columns, even spacing and (even) scales. Note: This is not tested so it might need tweaking for older browsers.
<style>
html, body {
margin: 0;
padding: 0;
}
.content {
float: left;
width: 30%;
border:none;
}
.rightcontent {
float: right;
width: 30%;
border:none
}
.hspacer {
width:5%;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="rightcontent">content</div>
<div class="clear"></div>
I would use:
<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%;
}
.sidebox {
float: right;
width: 30%;
}
<div class="all">
<div class="maincontent">
MainContent
</div>
<div class="sidebox">
SideboxContent
</div>
</div>
It's the first time I use this 'code tool' from overflow... but shoul do it by now...
What you might like to do is look up CSS grid based layouts. This layout method involves specifying some CSS classes to align the page contents to a grid structure. It's more closely related to print-bsed layout than web-based, but it's a technique used on a lot of websites to layout the content into a structure without having to resort to tables.
Try this for starters from Smashing Magazine.
Look at the css Float property. http://w3schools.com/css/pr_class_float.asp
It works with block elements like div. Alternatively, what are you trying to display, tables aren't evil if you're really trying to show a table of some information.
I would try to give them all display: block; attribute and using float: left;.
You can then set width and/or height as you like. You can even specify some vertical-alignment rules.
<!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>
<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>
another...
try to use float: left; or right;, change the width for other values... it shoul work... also note that the 10% that arent used by the div its betwen them... sorry for bad english :)