I have been debating using css with div's and laying out elements, and really am looking to see if the practice i've been using would be considered the best practice, or if there is something different that i'm over looking that would be better.
Lets say we were placing two images on the same line, on on the left one on the right then an text in the ad below it. I might do something like:
#container{
width:800px;
height:300px;
}
.fleft{
float:left;
}
#left_img_container{
float:left;
width:150px;
}
#right_img_container{
float:right;
width:150px;
text-align:right;
}
#textArea{
margin-top:5px;
width:100%;
}
<div id='container'>
<div class='fleft'>
<div id='left_img_container'>FOO IMAGE 1</div>
<div id='right_img_container'>FOO IMAGE 2</div>
</div>
<div class='fleft' id='textArea'>this is my text</div>
</div>
Simple example but illistrates the float kind of layout style. Is this the better practice? or would using clear be better?
Thanks in advance
fleft as a class name is not good practice.
What if your client/boss says, "alright, we want that div on the right?"
You have 2 options... change the fleft class to be float: right, or make a new class and change it in the HTML. CSS classes should be titled by their meaning or description without using descriptive words which include position/colour/size etc.
The only exception I've found to the rule are images in an article. Since they generally float to the left and right, I do use class names image-left and image-right.
Examples
(from a bad name to a better name)
top => header
left-side-bar => menu
bottom-menu => footer
Of course, these are only examples. It's also good practice, because when HTML5 comes along, you'll actually define <header>, <footer>, etc
You can probably clean up your HTML code a bit, and use less classes in your CSS, like so:
<div id="container">
<img id="foo1" src="foo1" />
<img id="foo2" src="foo2" />
<p>This is my text</p>
</div>
#container {
width:800px;
height:300px;
}
#foo1 {
float:left;
}
#foo2 {
float:right;
}
#container p {
margin-top:5px;
clear:both;
}
It all depends on the implementation... But I do agree with Alex... You need to follow a more appropriate naming standard.... which would serve you better for the future...
Related
I want two add two forms one on left and one on right of the page
and then what i write should be displayed below them.But the problem is it is being shown between the two forms.
<form class="login">.....</form>
<form class="signup">.....</form>
<p>This content should be displayed below but it is displayed in space between the two forms</p>
CSS
.login{
float:left;
}
.signup{
float:right;
}
The use of floated element is highly discouraged since there are a lot of other better alternatives that can be used instead.
Best alternatives are
display: inline-block;
CSS
.login{
display:inline-block;
}
.signup{
display:inline-block;
}
Flexbox
If you still want to use floated elements you can use a clearfix. Clearfix is a way an element automatically clears its child elements. For more information read How to use clearfix
Mention the Width property width:50%; it will work
.login{
float:left;
width:50%;
}
.signup{
float:right;
width:50%;
}
<form class="login">.....</form>
<form class="signup">.....</form>
<p>This content should be displayed below but it is displayed in space between the two forms</p>
Adding style clear:both to your paragraph will help.
.clear
{
clear:both;
}
<p class="clear">This content should be displayed below but it is displayed in space between the two forms</p>
I'm trying to determine the best way to format two columns of text like this using CSS:
(take the ----- as spaces)
dfasfasdfsa ------------ fdafsadfasdfasdf
fdsafadsfaf ------------ fadsdsafasfsaf
fdfgfgdsdffd ----------- fgdhfjshkjahjkh
fdljkgjklkj --------------- jfkldjskafljaf
I could brute force position it, but I'm sure there must be an easier way..any advice? Sorry for the beginner question.
Use two division tags and set their float property
<div style='float:left; width:30%'>
Put your content here...
</div>
<div style='float:left; width:40%; margin-left:30px'>
Put another content here...
</div>
With the float property, the two divs will be aligned sideways, the margin-left property will give a margin between the two division.
You could optionally put the CSS in a separate file, then use id or class to reference it.
css3 columns work on modern browsers, no support for IE8 or under.
http://www.quirksmode.org/css/multicolumn.html
https://developer.mozilla.org/en/CSS3_Columns
You can define the number of columns and the space between columns:
div {column-count:2; column-gap: 20px;}
Alternatively, the jQuery columnizer plugin works cross browser:
http://welcome.totheinter.net/columnizer-jquery-plugin/
I have extended Chibuzo's solution and here it is:
CSS:
.col1 {
float:left;
width:100px;
background-color: #E8F6F7;
}
.col2 {
float:left;
width:200px;
margin-left:30px;
background-color: #f2dede;
}
HTML:
<div class="col1">
<div>Monday:</div>
<div>Tuesday:</div>
<div>Wednesday:</div>
</div>
<div class="col2">
<div>open 8am to 5pm</div>
<div>open 9am to 4pm</div>
<div>open 9am to 6pm</div>
</div>
and it looks like this:
I had been trying to do it with CSS position, relative and absolute, which is possible but can be rather frustrating.
how can one create a css layout as seen on google wave that resizes automatically according to window size without the need for scrolling (apart from the specific elements on each page which are using scrollbars) with each div positioned in a similar fashion as seen on the website? i really love this interface and have been trying to create it on dreamweaver (web programming is a hobby) without using tables as practice.
i am learning css from scratch.
i have included an image for reference.
many thanks!
The columns can be achieved using CSS floats. Simply create three div tags and apply float: left and assign a width to each one.
The 100% height can be achieved through CSS, but in Wave's case javascript is probably being used. The particular logic depends on the site's design, since you need to take into account other elements on the page, such as a header bar.
If you were interested, you could use Firebug/Developer console to inspect how Google Wave's basic layout is setup tag-wise. One wrapper div, 3 column divs, and a div or two within each column for the panels.
I made a lil example about how you could try to start achieving that kind of layout: http://jsfiddle.net/steweb/A77gy/
Working with widths is pretty simple because you set floating columns, % widths/margins and opla' you get the fluid width layout.
Working with heights is very hard I think, because if you want a 'fluid' behavior that also affects heights, without using abs positioning (good for setting % height, but you lose the % width powerful), you should do something with JS too (even if I would avoid to do something that concerns the pure layout by JS) - I apologize for this complicated sentence :D.
By dealing with this kinds of layout 'problems' you will also notice that some browsers (...IE?...) sometimes behave in a weird way... so you will need some kinds of tricks to make everything working in EVERY browser (this is the main challenge IMO)
markup:
<div id="header">
link 1
|
link 2
|
link 3
|
link 4
<!-- or a <ul> -->
</div>
<div class="column" id="first-column">
<div class="window" id="window-1"></div>
<div class="window" id="window-2"></div>
</div>
<div class="column" id="second-column">
<div class="window" id="window-3"></div>
</div>
<div class="column" id="third-column">
<div class="window" id="window-4"></div>
</div>
css:
body, html{
height:100%;
}
#header{
width:100%;
height:30px;
background:black;
}
.column{
float:left;
margin:1%
}
#first-column{
width:10%;
}
#second-column{
width:30%;
}
#third-column{
width:50%;
}
.window{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #CECECE;
width:100%;
}
#window-1{
height:100px;
}
#window-2{
margin-top:10px;
height:200px;
}
#window-3{
height:310px;
}
#window-4{
height:310px;
}
I found this thread on here which answers my question. I want to ask a question relating to this thread, but I'm not sure how to comment on the thread...excuse my ignorance :)
I followed the instructions of the ticked answer and it worked. Then in my content div I want three divs, but when I float one left...my background-color ont he content div won't stretch. So it looks something like:
html:
<div id="content">
<div class="wrapper">
<div id="content1></div>
<div id="content2></div>
<div id="content3></div>
</div>
</div>
CSS:
#content 1 {
width:300px;
float:left;
}
#content 2 {
width:300px;
float:left;
}
#content 3 {
width:300px;
float:right;
}
I will probably have to link you guys to the site before youc an understand what I'm waffling about. But it's not online yet so I just thought someone might be aware of an issue with floating divs left or right when using this wrapper class technique?
Colm
I ask only because you didn't mention it, but did you clear your floats after the floating divs? Make sure you do like this:
<div style="clear: both;"></div>
or you could put:
overflow: hidden; width: 100%;
in the style attribute of your wrapping div.
Try these options and see if they work for you.
I haven't played with CSS for too long a time and am without references at the moment. My question should be fairly easy but googling isn't bringing up a sufficient answer. So, adding to the collective knowledge...
|#header---------------------------------------------------------------|
| TITLE |
|#sub-title------------------------------------------------------------|
|bread > crumb | username logout |
|#sub-left | #sub-right|
|---------------------------------|------------------------------------|
That's what I'm wanting my layout to be. The heading anyways. I wanted sub-title to contain sub-left AND sub-right. What css rules do I use to ensure a div is bound by the attributes of another div. In this case, how do I ensure that sub-left and sub-right stay within sub-title?
Its quite a common misconception that you need a clear:both div at the bottom, when you really don't. While foxy's answer is correct, you don't need that non-semantic, useless clearing div. All you need to do is stick an overflow:hidden onto the container:
#sub-title { overflow:hidden; }
When you float sub-left and sub-right they no longer take up any space within sub-title. You need to add another div with style = "clear: both" beneath them to expand the containing div or they appear below it.
HTML:
<div id="sub-title">
<div id="sub-left">
sub-left
</div>
<div id="sub-right">
sub-right
</div>
<div class="clear-both"></div>
</div>
CSS:
#sub-left {
float: left;
}
#sub-right {
float: right;
}
.clear-both {
clear: both;
}
This should do what you are looking for:
<html>
<head>
<style type="text/css">
#header {
text-align: center;
}
#wrapper {
margin:0 auto;
width:600px;
}
#submain {
margin:0 auto;
width:600px;
}
#sub-left {
float:left;
width:300px;
}
#sub-right {
float:right;
width:240px;
text-align: right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Head</h1></div>
<div id="sub-main">
<div id="sub-left">
Right
</div>
<div id="sub-right">
Left
</div>
</div>
</div>
</body>
</html>
And you can control the entire document with the wrapper class, or just the two columns with the sub-main class.
I agree with Darko Z on applying "overflow: hidden" to #sub-title. However, it should be mentioned that the overflow:hidden method of clearing floats does not work with IE6 unless you have a specified width or height. Or, if you don't want to specify a width or height, you can use "zoom: 1":
#sub-title { overflow:hidden; zoom: 1; }
This answer adds to the solutions above to address your last sentence that reads:
how do I ensure that sub-left and sub-right stay within sub-title
The problem is that as the content of sub-left or sub-right expands they will extend below sub-title. This behaviour is designed into CSS but does cause problems for most of us. The easiest solution is to have a div that is styled with the CSS Clear declaration.
To do this include a CSS statement to define a closing div (can be Clear Left or RIght rather than both, depending on what Float declarations have been used:
#sub_close {clear:both;}
And the HTML becomes:
<div id="sub-title">
<div id="sub-left">Right</div>
<div id="sub-right">Left</div>
<div id="sub-close"></div>
</div>
Sorry, just realized this was posted previously, shouldn't have made that cup of coffee while typing my reply!
#Darko Z: you are right, the best description for the overflow:auto (or overflow:hidden) solution that I have found was in a a post on SitePoint a while ago Simple Clearing of FLoats and there is also a good description in a 456bereastreet article CSS Tips and Tricks Part-2. Have to admit to being too lazy to implement these solutions myself, as the closing div cludge works OK although it is of course very inelegant. So will make an effort from now on to clean up my act.
Seriously try some of these, you can choose fixed width or more fluid layouts, the choice is yours! Really easy to implement too.
IronMyers Layouts
CSS Layouts
Layouts Customization Guide
750 Pixel CSS Layouts
950 Pixel CSS Layouts
100 Percent CSS Layouts
more more more
Layout Gala CSS Layouts
Glish CSS Layouts
Code Sucks CSS Layouts
Max Design CSS Layouts
CSS Play CSS Layouts
You can also achieve this using a CSS Grids framework, such as YUI Grids or Blue Print CSS. They solve alot of the cross browser issues and make more sophisticated column layouts possible for use mere mortals.
Best and simple approach with css3
#subtitle{
/*for webkit browsers*/
display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack: center;
width:100%;
}
#subleft,#subright{
width:50%;
}
Something like this perhaps...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#container
{
width:600px;
}
#head, #sub-title
{
width:100%;
}
#sub-left, #sub-right
{
width:50%;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="head">
#head
</div>
<div id="sub-title">
#sub-title
<div id="sub-left">
#sub-left
</div>
<div id="sub-right">
#sub-right
</div>
</div>
</div>
</body>
</html>
#sub-left, #sub-right
{
display: inline-block;
}
Via Bootstrap Grid, you can easily get the cross browser compatible solution.
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">
Div1
</div>
<div class="col-sm-6" style="background-color:lavenderblush;">
Div2
</div>
</div>
</div>
jsfiddle: http://jsfiddle.net/DTcHh/4197/
You do it like this:
<table>
<tr>
<td colspan="2">TITLE</td>
</tr>
<tr>
<td>subleft</td><td>subright</td>
</tr>
</table>
EASY - took me 1 minute to type it.
Remember the CSS file needs to be downloaded to the client, so don't worry about the waffle about extra tags, its irrelavent in this instance.