Is it possible to remove the staircase effect in this example ? I have one div floating right and a few divs with fixed height and fixed width floating left. If the divs meet somewhere I get a rather strange staircase effect.
I know why this happens and I get it but im looking for a solution to avoid this. Please help me
<div class="container">
<div class="fright">just some contents floating right</div>
<div class="fleft">a div</div>
<div class="fleft">
this one is the problem.
Is it possible to have this div start at position B
</div>
<div class="fleft"><b>Position B</b></div>
<div class="fleft">a div</div>
</div>
and the css
div{
margin:10px;
padding:10px;
.container{
width:460px;
float:left;
}
.fright{
float:right;
border:1px solid green;
}
.fleft{
float:left;
height:180px;
width:180px;
border:1px solid orange;
}
http://jsfiddle.net/FusWd/1/
Instead of using floats, you may want to try using inline-block to do your layout.
I've updated your example here : http://jsfiddle.net/FusWd/4/
There are some caveats with this technique:
IE 6-7 doesn't support inline-block, you'll have to use the 'hasLayout' trick.
inline-block elements are influenced by whitespace in your markup, which may or may not break your layout. There are a couple of solutions to this.
You can remove the whitespace between the inline block elements in your markup
set the parent element's font-size and line-height to 0, and the letter-spacing and word-spacing properties to -1px, then reset font-size and line-height to their desired values, and reset letter-spacing and word-spacing properties to the normal values.
Related
This jsFiddle illustrates what this question refers to (full code below). Note that, even though #outer-div should have 0 padding, and #inner-div should have 0 margin-bottom, it appears as though the there's some padding and/or margin between the bottom edges of #outer-div and #inner-div.
Where does this come from, and, more importantly, how can I suppress it?
css
html,body,div{margin:0;padding:0;border:0;outline:0}
body{background:white;}
#outer-div{
background:lightgray;
margin-top:20px;
text-align:center;
}
#inner-div{
background:black;
display:inline-block;
}
html
<!doctype html>
<body>
<div id="outer-div">
<div id="inner-div" style="background:black;width:100px;height:100px;">
<div style="background:orange;margin:1px;width:96px;height:96px;padding:1px;">
<div style="background:white;margin:1px;width:94px;height:94px;"></div>
</div>
</div>
</div>
Inline elements are sensitive to white space and that gap is reserved for descender elements. Adding vertical-align:top to #inner-div is one way to fix this:
#inner-div {
background:black;
display:inline-block;
vertical-align:top;
}
jsFiddle example
A second way is to set font-size:0 on the parent element in this jsFiddle example.
test http://o7.no/U5w2EV
The structure for this is:
<div id='container'>
<div id='play'>▶</div>
<div id='res'>RES</div>
<div id='bar'>test</div>
<div id='time'>0</div>
</div>
The styles are:
for #container
#container
{backgroundColor:'#CCCCCC',
position:'absolute',
bottom:'-40px',
width:'100%',
height:'40px'}
for Buttons #res and #bar
#res , #bar
{width:30px;
height:30px;
border:1px solid #DDDDDD;
margin:5px;
font-weight:bold;
cursor:pointer;
float:left}
for #time
#time
{float:'left',fontSize:'16px',margin:'12px 5px'}
Note: the width of the container of the container (where it takes the 100%) changes dinamically.
How to set the CSS as to the #bar div fill all the space remaining from the other divs?
You've got incomplete code posted above. It's also formatted incorrectly (css).
But I "think" if you remove the css float on the inner <div>'s and instead make them display: inline-block; you should be able to declare CSS width: percentages on the inner <div>'s and have them fill your container.
You can add another <div> at the bottom after <div id='time'> and set the style clear:both
I couldn't do it with CSS in a satisfactory manner so I added a JavaScript listening to resize attempts which would keep it the right size mathematically.
I'm having trouble making divs top position be relative to its preceding subling.
I have:
<style>
#container {position:absolute; top:0px; height:100%}
.question {position:relative;border: 1px double black;}
.question [scope=title] {position:relative; top:0px; color:black;font-size:28px; border-bottom: 1px double black;}
.question [scope=body] {position:relative; top:0px; color:black;font-size:18px; }
.question [scope=author] {position:relative;top:10px}
.question [scope=tags] {position:relative;top:0px}
</style>
and then
<div ID="container">
<div class="question">
<div scope="title">A</div>
<div scope="body">B</div>
<div scope="author">C</b></div>
<div scope="tags">D</div>
</div>
</div>
I expect author div to be 10px lower than normally would be, and for the following div to be relative to that. However, "tags" and "author" overlap.
So irritating, yet I bet there is a simple answer. Any help?
Try to set the margin-top on the author instead:
.question [scope=author] {position:relative;margin-top:10px}
Because your question element is computing to the height of the child elements.
So its height is matching the exact height of the children, but one of the children (C) you are pushing it down 10px so it is overlapping the one below it.
Just change author and it will work.
.question [scope=author] {position:relative;top:0px}
When one element has a position:relative offset, the element is rendered at an offset, but the other elements are placed in the layout flow as if the element did not have an offset. In other words, the offset happens outside of the layout flow. It's like an absolutely-positioned element that has an invisible placeholder occupying space for it in the layout.
Since you want the elements to respond to one another's offset, that suggests using a different mechanism for offsets, one that happens within the layout flow: padding or margins.
I am attempting to create a visual element using DIV elements and CSS which should display data in the format demonstrated below.
[-----50%-----|--25%--|--25%--]
When using the code and CSS I've specified below, my final element always spills onto the next line and the CSS percentage values I'm specifying don't seem to create the layout properly.
Could anybody suggest a better way to do this?
My HTML
<div class="visual-indicator-title">
All Items</div>
<div class="visual-indicator-holder">
<div class="vi-internal-element" style="width: 25%; background-color: #5E9BD1;">
25%</div>
<div class="vi-internal-element" style="width: 25%; background-color: #AB884D;">
25%</div>
<div class="vi-internal-element" style="width: 50%;">
50%</div>
</div>
<div class="visual-legend">
<ul class="inline-block">
<li>
<div class="legend-blue">
</div>
Sales</li>
<li><span class="legend-tan"></span>Processed</li>
<li><span class="legend-grey"></span>Pending Processing</li>
</ul>
My CSS
.visual-indicator-title{
font-size:12px;
font-weight:bold;
color:#777777;
}
.visual-indicator-holder
{
width:100%;
background-color:#666666;
height:28px;
border-radius: 8px;
}
.visual-indicator-holder .vi-internal-element
{
font-size:11px;
text-align:center;
color:#ffffff;
background-color:#777777;
border-radius: 6px;
display:inline-block;
}
The reason this happens is that with inline or inline-block, white space in the element will affect the rendering (adds space). Here is your demo working with white space removed, no changes to the CSS: http://jsfiddle.net/fZXnU/
Removing white space is not trivial though, so you'd be better off floating the elements (which triggers display:block). Working demo with plenty of white space: http://jsfiddle.net/fZXnU/1/
You can use float: left, position: relative, and then define width in percentage as you are.
I modified your code to use float here: http://jsfiddle.net/Z3kdP/.
If you remove the white-space between the divs then it works as intended.
http://jsfiddle.net/TeJuU/
EDIT: See this question: How to remove the space between inline-block elements?
You can make font-size: 0 on the parent element if you don't want to edit your html.
http://jsfiddle.net/TeJuU/1/
All of those elements have margin and padding with them as well as the percentages creating rounding errors during calculation. So you need to make sure you set, or take into consideration, what margin is doing to this. For rounding errors, it's typical to let the percentages add up to something less than 100% but then add margin: auto to center the whole thing.
I currently have a div with width:auto to fill the entire screen width but I want to put a side bar on the right hand side.
When I float the width:auto div left and fixed width div to the right it goes under instead.
I'm basically looking for something similar to what reddit have with there search bar on the right width the content auto adjusting to the page width.
Thanks
You can make it like this:
Say you have those 2 divs inside a parent container, which expands to fit the page:
<div id="container">
<div id="autowidth">text expands her...</div>
<div id="fixed">This is a fixed column</div>
</div>
In your CSS:
#container {
width:100%;
border:1px solid black;
padding-right:200px;
}
#autowidth{
width:100%;
background-color:red;
float:left;
}
#fixed{
width:200px;
background-color:green;
float:right;
margin-right:-200px;
}
Basically, the parent container holds everything together. It has a padding of 200px (the width of the right col), so that its content doesnt goes beyond that point. In turn, the right col has a margin of -200px, so that it forces the boundaries imposed by the parent padding and places itself always at the foremost right. The other div, actually, now has only the spaces provided by the parent container, constrained by its padding, so its 100% would be, in fact, (100% - (parent's padding)). You can see a working result of this here: jsfiddle.
I'm pretty sure there might be more elegant solutions out there, so bear with me.
if you want to give a background, like it were 2 cols, you can go for the classical 'faux columns' background (see example at a list apart )
You don't strictly need a container div. I did css inline for brevity.
<div style="float:right; width:14em; background-color:#CCC;">
<p>This div is fixed-width.</p>
</div>
<div style="background-color:#EEE; margin-right:14.5em;">
<p>This div is auto-width.</p>
</div>
The answer doesn't work for me, I think it's outdated. Now you have to specify box-sizing: border-box for padding to count to width, but thanks for inspiration. This is my solution.
#autowidth {
float:left;
width:100%;
padding-right:200px;
box-sizing:border-box;
}
#fixed {
float:right;
width:200px;
margin-left:-200px;
}