I am trying to split a div into two event columns. The first div should be aligned left and the second div should be aligned right.
My solution is basically the following...
<div style="width:100%;>
<div style="width:50%; float:left;">
</div>
<div style="width:50%; float:right;">
</div>
</div>
My second column (my button panel) is going on a new line. I'm fairly new to css so help with a quick explanation would be appreciated.
https://jsfiddle.net/ff2yo9n3/
thanks
Since you are new to CSS, why not learn a modern layout technique with a broad range of options (flexbox), as opposed to an older method which has limited capacity and was never intended for building layouts (floats)?
With CSS3 Flexible Boxes (flexbox) you can build your layout quickly, simply and efficiently.
Here's all you need:
HTML (removed inline styles)
<div class="header">
<div>Buttons</div>
<div>
<a data-code="button" title="Show Source" class="top-button">
<i class="fa fa-code"></i>
</a>
</div>
</div>
CSS (added two lines of code)
.box .header {
font-weight:300;
border-bottom: 1px solid #ccc;
font-size: 15px;
margin-bottom: 10px;
padding: 5px 10px;
line-height: normal;
/* new */
display: flex;
justify-content: space-between;
}
DEMO
Flexbox benefits:
minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex items
it's responsive
it's the future of CSS layouts
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.
If you want to split the div into two 50% width elements, you can't go the way you did there.
Both has to have the same floating element or else they will be overlapping with each other. This is a broad topic that is explained in MDN, referred as Block Formatting Context.
What you may want to do instead, make both divs to float: left; and width: 50%; then set the text-align: right; for the right aligned div.
Related
I ran into an interesting CSS problem today, and I have been wracking my brain trying to solve it.
This is similar to the trivial problem of "a row of three elements, with a left, a right, and center," which can be solved easily with flexbox — but it has a couple of caveats that make it (I think) an impossible layout without JavaScript.
The desired goal
Consider a row-like container element and three children, "left", "right", and "center". The children may be of varying widths, but they are all the same height.
"Center" should try to stay centered relative to its container — but the three sibling elements must not overlap, and may push outside the container if necessary.
The markup, then, might look something like this:
<div class="container">
<div class="left">I'm the left content.</div>
<div class="center">I'm the center content. I'm longer than the others.</div>
<div class="right">Right.</div>
</div>
The CSS is where the challenge is.
Examples of what should happen
For wide containers, "center" is centered relative to the container (i.e., its siblings' widths do not matter), as in the image below; notice that midpoint of the "center" element matches the midpoint of the container, and that the left and right "leftover" spaces are not equal:
For narrower containers, "center" abuts the widest sibling, but it does not overlap. The remaining space is distributed only between the narrow sibling and the "center" sibling. Notice also that the container's midpoint, indicated by the caret, is no longer the same as "center's" midpoint:
Finally, as the container continues to shrink, there's no other option but to have all three elements lined up in a row, overflowing the parent:
My attempts to solve this
Surprisingly, I haven't found a good way to implement this in pure CSS.
You'd think flexbox would be the winner, but you can't really get flexbox to do it right: The space-between property distributes the space uniformly between the elements, so the center element doesn't actually end up centered. The flex-grow/shrink/basis properties aren't especially useful for this either, since they're responsible for controlling the size of the child elements, not for controlling the size of the space between them.
Using position:absolute can solve it as long as the container is wide enough, but when the container shrinks, you end up with overlap.
(And float layouts can't get within a mile of getting this right.)
I could combine the best two solutions above, and switch between them with a #media query — if all of the widths were known in advance. But they aren't, and the sizes may vary widely.
In short, there's no pure-HTML-and-CSS solution to this problem that I know of.
Conclusion, and a JSFiddle to experiment with
I created a JSFiddle that shows both the desired goal and a few non-solutions. Feel free to fork it and experiment. You can simulate the container resizing by grabbing the bar to the left of the content and dragging it. You are allowed to rearrange/restructure the HTML and CSS, if rewriting it gets you closer to a working answer.
https://jsfiddle.net/seanofw/35qmdnd6
So does anyone have a solution to this that doesn't involve using JavaScript to intelligently distribute the space between the elements?
With flexbox you should be able to solve that, by giving the left/right elements flex: 1 and the right text-align: right.
The main trick is flex: 1, which will make them share available space equally.
For more versions, see this brilliant question/answer, flexbox-justify-items-and-justify-self-properties
Fiddle snippet
Stack snippet
body {
font: 14px Arial;
}
.container {
display: flex;
border: 1px solid #00F;
}
.container > div > span {
display: inline-block;
background: #36F;
white-space: nowrap;
padding: 2px 4px;
color: #FFF;
}
.container > .center > span {
background: #696;
}
.container .left,
.container .right {
flex: 1;
}
.container .right {
text-align: right;
}
.center-mark {
text-align: center;
font-size: 80%;
}
.note {
text-align: center;
color: #666;
font-style: italic;
font-size: 90%;
}
<div class="container">
<div class="left">
<span>
I'm the left content.
</span>
</div>
<div class="center">
<span>I'm the center content. I'm longer than the others.</span>
</div>
<div class="right">
<span>
Right.
</span>
</div>
</div>
<div class="center-mark">^</div>
<div class="note">(centered marker/text)</div>
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 recently start to learn CSS and table less design.
After reviewing some tutorials now I am involved with converting PSD Mockup to XHTML and CSS.
Most often my problem is to positioning elements and containers.
for example this below design:
I am converting this to CSS and HTML.
I have no problem with styling Input elements.
about main layout it seems two columns layout , right ?
How do I style containers ?
I wrote this code It displays better here.
I divided my page to two containers and valued (float:left) to left container.
As specified in jsFiddle link elements on the left side container had come out of the box (I think its because of float).
I can't set containers position to absolute.
Now please help me to refactor and change my code. And please explain to me how to position elements right ?
i think a
<div style="clear:both;"></div>
before the </div> of the container will work.
edit:
http://jsfiddle.net/xNwAc/5/
Try and have a wrapping element to contain your two columns. with W3C code, you'll want to use floated elements. The elements don't have any padding, you can work on them yourself, but it's a very basic structure to follow:
The CSS:
#wrapper { width: 960px; margin: 0 auto; background: blue; } /* positions it center of page */
#left { float: left; width: 50%; background: red;}
#right { float: right; width: 50%; background: green;}
The HTML:
<div id="wrapper">
<div id="left"> Left content </div>
<div id="right"> Right content </div>
</div>
You have to set a new formating context on the container, with overflow:auto; eg.
I sugger you to read the specification which is very clear and useful.
As the exclamation point is not a part of the content you can place it as a background image.
OK so what would happen if I have 2 divs (one containing text, the other an image). The image always has a static width but the text varies. hence making its containing div variable.
I can make it work for all other browsers (except IE6 and IE7) by using CSS display:table. IE6 and 7 don't have that so I can't find a workable solution to center them all.
... so you know what I'm talking about...
.container{text-align:center; width:100%}
.container .centered{display:table; margin:0 auto}
<div class="container">
<div class="centered">
<div id="text">varying length text</div>
<div id="image">IMAGE</div>
</div>
</div>
Quite apart from the lack of IE support, setting display: table as you have without its children using display: table-row/table-cell results in undefined behaviour. It doesn't make sense to put block elements directly inside a table element and the browser might do anything at all.
What you are trying to do is get shrink-to-fit width behaviour without using float, which is a normal way of getting shrink-width but requires that the block in question goes to the left or right not centre. Probably a better way of saying that would be to use an inline-block:
.centered { text-align: center; }
.centered span { display: inline-block; border: dotted red 1px; }
<div class="centered">
<span id="text">varying length text</span>
</div>
<div class="centered">
<span id="image">IMAGE</span>
</div>
(You have to use a naturally-inline element like span to make it work under IE<8; div would fail. There is also -moz-inline-box if you need to target Firefox 2.)
Are you using quirksmode or standards compliant mode? In other words have you included a DOCTYPE declaration at the top of your html page?
You shouldn't need to use display:table just margin:auto should do the trick provided you are using a standards mode.
This question already has answers here:
How can I reorder my divs using only CSS?
(27 answers)
Closed 6 years ago.
Given that the HTML
<div>
<div id="content1"> content 1</div>
<div id="content2"> content 2</div>
<div id="content3"> content 3</div>
</div>
render as
content 1
content 2
content 3
My question:
Is there a way to render it as below by using CSS only without changing the HTML part.
content 1
content 3
content 2
This can be done in browsers that support the CSS3 flexbox concept, particularly the property flexbox-order.
See here
However, support for this is only in current versions of most browsers still.
Edit Time moves on and the flexbox support improves..
This works for me:
http://tanalin.com/en/articles/css-block-order/
Example from this page:
HTML
<div id="example">
<div id="block-1">First</div>
<div id="block-2">Second</div>
<div id="block-3">Third</div>
</div>
CSS
#example {display: table; width: 100%; }
#block-1 {display: table-footer-group; } /* Will be displayed at the bottom of the pseudo-table */
#block-2 {display: table-row-group; } /* Will be displayed in the middle */
#block-3 {display: table-header-group; } /* Will be displayed at the top */
As stated there, this should work in most browsers. Check link for more info.
It might not exactly match what you're after, but take a look at this question:
CSS positioning div above another div when not in that order in the HTML
Basically, you'd have to use Javascript for it to be reliable in any way.
This is one of the classic use-cases for absolute positioning--to change rendering from source order. You need to know the dimensions of the divs to be able to do this reliably however, and if you don't javascript is your only recourse.
I was messing around in Firefox 3 with Firebug, and came up with the following:
<div>
<div id="content_1" style="height: 40px; width: 40px; background-color: rgb(255, 0, 0); margin-bottom: 40px;">1</div>
<div id="content_2" style="width: 40px; height: 40px; background-color: rgb(0, 255, 0); float: left;">2</div>
<div id="content_3" style="width: 40px; height: 40px; background-color: rgb(0, 0, 255); margin-top: -40px;">3</div>
</div>
It's not perfect, since you need to know the heights of each container, and apply that height value to the negative top margin of the last element, and the bottom margin of the first element.
Hope it helps, nd
I got it to work by doing this:
#content2 { position:relative;top:15px; }
#content3 { position:relative; top:-17px; }
but keep in mind that this will not work for you as soon as you have dynamic content. The reason I posted this example is that without knowing more specific things about your content I cannot give a better answer. However this approach ought to point you in the right direction as to using relative positioning.
One word answer: nope. Look into XSLT (XML Stylesheet Language Transforms), which is a language specifically geared towards manipulating XML.
If you know the height of each element then it is a simple case of vertical relative positioning to swap around the orders. If you don't know the heights then you either have to give them heights and allow the divs to get scroll bars if there is any overflow or calculate it all with JavaScript and add the relative positioning on-the-fly.
with jquery you can simply do:
$('#content2').insertAfter($('#content3'));
I don't think there's a way to do it with CSS, except to force fixed positioning of each of the divs and stack them that way.