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>
Related
http://optimalpages.de/DrupalMusi/
How can I position the main content div in the middle without it collapsing to the left, when left sidebar is shorter than the content? Is that possible? I don't want to use a fixed height for the navigation, but can I somehow say "sidebarleft height = content height", or is there an easier way?
Thanks!
Actually you are floating only elements to the left without any wrapper element, so what happens is this..
Instead, wrap the other 2 elements inside a wrapper element and than float it to the left
.left_wrap {
float: left;
width: 30%;
}
.right_wrap {
float: left;
width: 70%;
}
.right_wrap > div {
border: 3px solid #ff0;
height: 100px;
}
<div class="main">
<div class="left_wrap">
Hello
</div>
<div class="right_wrap">
World
<div></div>
<div></div>
</div>
</div>
Demo
Better Demo
If you want even a better one, I would suggest you to wrap the boxes inside the parent containers, and instead of floating the child elements, float the parent.
Demo
Also, don't forget to clear your floated elements, just make sure you clear them, you can use a self clearing parent CSS like
.clear:after {
content: "";
clear: both;
display: table;
}
And call the above class on the element containing floated elements as their children, where in this case, it's <div class="main"> so it should be now
<div class="main clear">
<!-- Floated Elements -->
</div>
I'm not quite sure if this is what you mean but try:
#node-29{
float: right;
clear: left;
margin-left: 0;
}
This will position the div's next to each other and keep the main content to the right.
This can be quite complex depending on your existing theme.
I wrote this page a while back to shows you how you can do that.
http://linux.m2osw.com/3columns
More or less you need a first div that encompasses the left column and the content. That div is the one that gets centered.
To make it simpler you can set a specific width to the div and you get something like this:
div.page
{
width: 900px;
margin: 0 auto;
}
That will center the main div.
For the column and the content, both are float: left; div's. In order to "close" the lot, you want another div just before closing the main div. That one has a style that ensures that the main div has the correct size: clear: both;.
we can use margins to set the div position .we can either specify fixed margins or we can give percentage value ,so that it will based on the total size of the screen.
<!DOCTYPE html>
<html>
<head>
<style>
#main
{
background-color:yellow;
}
#main
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body >
<div id="main">
this is how we can display main div in centre
</div>
</body>
</html>
What I'm trying to do is have three divs wrapped in a fixed width container that will auto resize when the content in the middle div expands. As the middle gets larger the two beside it get smaller if that makes sense.
<div id="container">
<div class="one"/>
<div class="middle">...</div>
<div class="two"/>
</div>
Not sure if I should be using div or span for this.
Any advice on the CSS?
#thirtydot The two divs at the side of
the middle div will contain nothing,
just a border-top, the middle div will
contain two links. :)
In that case, I'm answering with something simpler that you might be able to use.
See: http://jsfiddle.net/uZ5dn/
<div class="container">
<span class="middle">content con tent the tent of cons content content</span>
</div>
.container {
border-top: 5px solid #f0f;
text-align: center;
}
.middle {
background: #fff;
display: inline-block;
position: relative;
top: -5px; /* same as border-top-width */
}
It's not awesome, but it might be good enough.
At the very least, I'll get a better idea of what to suggest next.
If I'm reading your question correctly, I suspect that you'll have to do this with JavaScript, and DIVS.
You can get and set the actual size of the DIVs in pixels using the .height() function.
So, you could do something like:
if ($('#div2').height() > 200) {
$('#div1').height(100);
$('#div3').height(100);
} else {
$('#div1').height(200);
$('#div3').height(200);
}
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'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.