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.
Related
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/
I've been fiddling with asp.net mvc 3 with the new razor view engine.
My goal is to have a fixed-fluid 2 column layout with a jqGrid in each column. I'm having no luck though! As soon as I add a grid to the right column its header goes huge. I don't think its jqGrids fault because if i remove the styles both grids display as expected.
I see that the css for the jqGrid applies display: block to the header as part of the ui-helper-clearfix class.
Anyone have any suggestions to get this to work or other fixed-fluid css i could experiment with (I've tried a bunch of templates from online with no luck)?
Code from the template file:
... <style type="text/css">
#left { float: left; width: 400px;}
#content { margin-left: 400px;}
</style>
</head>
<body>
<div>
<div id="left">
#RenderSection("SPTreeGrid")
</div>
<div id="content">
#RenderSection("ClientPickerGrid")
</div>
</div>
</body>
Update:
My page actually needed to display 2 grids in fixed width on the left and a fluid one on the right.
It was an issue with my css (I still dont know why) but I ended up using the following layout which works (rail is the left column):
#container{
overflow:hidden;
padding-left:400px; /* The width of the rail */
}
* html #container{
height:1%; /* So IE plays nice */
}
#content
{
width:100%;
border-left:400px; /* The width and color of the rail */
margin-left:-400px;
float:right;
}
#rail{
width:400px;
float:left;
margin-left:-400px;
display:inline; /* So IE plays nice */
}
cshtml:
<div id="container">
<div id="content">
#RenderSection("ReportGrid")
</div>
<div id="rail">
#RenderSection("SPTreeGrid")
#RenderSection("ClientPickerGrid")
</div>
</div>
Although Oleg's suggestion does fix the height of the title, it does not constitute a solution -- at least not if you want the right div to be liquid and expand to the width of the browser window. The problem is that in order to use float:left on the right grid container, you must specify a width. Floated elements must have explicit widths associated with them (if not, they take on the width of the widest element inside them).
One work-around that worked for me is to set a height of the floated to something small (1px) and set an explicit height for the content of that div.
I have created a jsFiddle example that illustrates the problem and the work-around.
You should use
<div style="float:left">
<table id="list1"><tr><td/></tr></table>
<div id="pager1"></div>
</div>
<div style="float:left">
<table id="list2"><tr><td/></tr></table>
<div id="pager2"></div>
</div>
as the template for the grids. If you case it should be
<style type="text/css">
#left { float: left; }
#content { float: left; }
</style>
You should not forget to include "clear:left" in the style of the next div which should be after the grid if you want to brake the floating.
See demo with two grids here
I am trying to wrap a div called content with another div that has a different background.
However, when using "margin-top" with the content div, it seems like the wrapping DIV gets the margin-top instead of the content div.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
html {
background-color:red;
}
#container-top {
background-color: #ccc;
overflow: hidden;
padding-top: 10px;
border-bottom: 1px solid #000;
height:30px;
}
#container-bottom {
background-color: #F1F4F2;
}
#content {
margin-top:20px;
}
</style>
</head>
<body>
<div id="container-top">
</div>
<div id="container-bottom">
<div id="content">
Hello
</div>
</div>
</body>
</html>
So in the example, the div container-bottom gets the margin-top instead of the content div.
I found out that if I add a char inside container-bottom it fixes the issue.
<div id="container-bottom">
**A**
<div id="content">
Hello
</div>
But of course that is not a good solution...
Thanks,
Joel
What's happening is called margin-collapsing.
If two margins (top & bottom only, not right or left) of 2 elements are touching (or in your case, the top-margin of the inner div is touching the top-margin of the outer div), the max between them is used (in your case max(0, 20) = 20) and placed as far as possible from the touching elements (in your case outside the container div (the outermost element)).
To break this behavior, you have to place something between the 2 margins -> a padding at the top of the container div will do.
#container-bottom {
background-color: #F1F4F2;
padding-top: 1px;
}
#content {
margin-top:19px;
}
other solution (works, but may not suit your needs):
you can simply put a padding-top of 20 px in the container div:
#container-bottom {
background-color: #F1F4F2;
padding-top: 20px;
}
#content {
}
for more informations, this page explains it very well: Margin Collapsing
You could try adding a non-breaking space to the #container-bottom:
<div id="container-bottom">
<div id="content">
Hello
</div>
</div>
This is a suitable solution as it is often used to let a browser know that an element is not empty (some browsers ignore empty elements).
Margin-top is a mysterious creature because of its collapsing properties. I have found the easiest fix to this problem is to apply a 1px padding-top to the container-bottom div and change the content margin-top to 19px.
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
I have two divs with float: right:
<div id="container" style="width:760px">
<div id="d1" style="float:right;"></div>
<div id="d2" style="float:right;"></div>
</div>
I want to hide any overflow in d2 if the contents of both divs get too wide to fit in their container (it all should be one line that must not wrap on a second line). As you may have guessed, the width of the contents is not fixed, and as you know overflow: hidden doesn't work if the width is not specified.
Thanks in advance for any suggestions ...
Edit:
After reading the comment of tharkun, I thought I probably should clarify more what I'm trying to achieve so I created this draft:
http://www.waleedeissa.com/temp/css-problem.gif
As you can see in the image above, I have a member menu (the links in the member menu differ slightly from time to time - to notify the member of some events), also as you see in the image, the member name is displayed next to the menu, as the member name is chosen by the member it varies in width from one member to another and I'm worried it could become too wide for some members which will cause the member name to be displayed below the menu not to the left of it, so, in case the member name is too long I want to hide a part of it (using overflow: hidden) so that it fits on stays on the same line.
You could try something like:
#d2 {
height: 1em;
overflow: hidden;
}
But you already specified that that might not work.
Anyway, it´s not something I would ever try because you are required to specify a width when you float an element.
Another solution would be to use javascript to calculate and set the widths dynamically.
Edit: Another solution would be to set text-align:right to your container and display:inline to d1 and d2. That way you could try to style d2 without breaking css standards.
Third solution: You can also try to position MemberName absolute inside d1 or d2 (the left one). That way you can give d1/d2 a fixed width (=good for a float) and MemberName will run out of the screen on the left side automatically.
Try this:
<html>
<head>
<title>Layout</title>
<style type="text/css">
.container { border: 1px solid black; overflow: hidden; white-space: nowrap; text-align: right; }
.container div { display: inline; }
.d1 { background: yellow; }
.d2 { background: #DDD; }
</style>
</head>
<body>
<table>
<div class="container" style="width:300px">
<div class="d1">this is the content of the first div</div>
<div class="d2">this is the content of the second div</div>
</div>
<div class="container" style="width:300px">
<div class="d1">first div</div>
<div class="d2">second div</div>
</div>
</body>
</html>