How do I arrange $Title horizontally in SilverStripe with the following HTML code?
<div class="content-container unit size3of4 lastUnit">
<article>
<h1>$Title</h1>
<% loop $Children %>
<div class="item col-md-6">
<h3>
$Title
</h3>
</div>
<% end_loop %>
</article>
$Form
$CommentsForm
</div>
We can achieve this with some simple css.
We use float: left on the .item div to make items layout side by side.
We then set a width of 25% (or a margin and width that equal 25%). We can add some margin to ensure there is some spacing between the items.
Finally we add some css to article to clear the floating items. We do this so any content below the floating items appears correctly.
CSS
.content-container article .item {
float: left;
width: 22%;
margin-right: 3%;
}
.content-container article:before,
.content-container article:after {
content: " ";
display: table;
}
.content-container article:after {
clear: both;
}
JSFiddle example
Related
In a responsive layout, I have two columns. The left column is the sidebar and the right column is the content.
Using a media query, when the screen width is tiny, the columns turn to 100% width and stack on top of each other.
In this case, I want the sidebar (the first div) to appear beneath the content (the second div).
I tried using float: right on a small screen once it's at 100%, but at 100% width, the float apparently doesn't matter.
.left, .right {
width: 100%;
float: left;
background: green;
}
.left {
float: right;
background: red;
}
.half {
width: 50%;
}
.space {
width: 100%;
display: block;
height: 40px;
}
And on the page:
<div class="left half"> <!-- To mimic full screen size -->
Left
</div>
<div class="right half">
Right
</div>
<div class="space"></div>
<div class="left"> <!-- To mimic small screen size -->
Left
</div>
<div class="right"><!-- This should appear first -->
Right
</div>
Here is the fiddle: https://jsfiddle.net/ph09frvw/
I'm sure this is not the first time someone wanted to wrap the sidebar under the content, I just haven't been able to find a solution.
You can use display: flex and use the order property to change the order of the <div> elements. While floating can be helpful for horizontal alignment, it will be of little help for vertical alignment, Here is an example:
.flex {
display: flex;
flex-flow: row wrap;
}
.left {
order: 2;
flex: 1 0 50%;
background: red;
}
.right {
order: 1;
flex: 1 0 50%;
background: green;
}
.full {
margin-top: 20px;
}
.full > .left,
.full > .right {
flex: 1 0 100%;
}
<div class="flex">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
<div class="flex full">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
You could use the display:flex; property combined with flex-direction to reorder your divs. Ref: https://css-tricks.com/almanac/properties/f/flex-direction/
Remember to reference your related class-names in your HTML elements' class attribute.
Your CSS display:block should do the trick, else try something like:
float: left
When you use: display:block on a div element, you do not need to specify width:100% as it should automatically span across the width if it is not hindered by anything else.
Make sure the position of these elements are "relative", else it may not work as expected; it may be stated globally that some specific tags should be displayed "absolute" and that may break what you're trying to achieve.
This question already has answers here:
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 7 years ago.
Consider the code below:
<div class="row">
<div class="col-xs-3"><div id="sidebar">sidebar</div></div>
<div class="col-xs-3">content content content content content content content content content content content content content content content</div>
</div>
I want the sidebar always has the height of the right column.
Demo: http://www.bootply.com/FT3DVckZgp
Use table method. It works in all browsers. Give display: table to parent and display: table-cell to children.
.row {
display: table;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
Here is the fiddle
Another cool method is with the help of margins.
.row{
overflow: hidden;
}
[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
Here is the fiddle
You can use following code to define column of same height by providing display layout as table, table-cell.
Define these CSS classes
.container-sm-height
{
display: table;
padding-left:0px;
padding-right:0px;
}
.row-sm-height
{
display: table;
table-layout: fixed;
height: 100%;
}
.col-sm-height
{
display: table-cell;
float: none;
height: 100%;
}
For Small devices use this media query
#media (min-width: 480px)
{
.row-xs-height {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.col-xs-height {
display: table-cell;
float: none;
height: 100%;
}
}
Now Apply these classes in your HTML structure as following
<body>
<div class="row container-fluid row-sm-height">
<row class="col-sm-3 col-sm-height" id="sidebar">
<!--your code-->
</row>
<row class="col-sm-9 col-sm-height">
<!--Your code-->
</row>
</div>
</body>
HTML
<div class="row">
<div class="col-xs-3 euqlHeight"><div id="sidebar">sidebar</div></div>
<div class="col-xs-3 euqlHeight">content content content content content content content content content content content content content content content</div>
</div>
JS
var maxHeight = 0;
$(document).ready(function() {
$(".euqlHeight").each(function() {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$(".euqlHeight").height(maxHeight);
});
$(window).resize(function() {
maxHeight = 0;
$(".euqlHeight").removeAttr("style");
$(".euqlHeight").each(function() {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$(".euqlHeight").height(maxHeight);
});
Give id to the second right col and on page load use jquery as
$("#sidebar").css("height", $("#IdOfRightDiv").height());
You can Go For the Display:table Property to Get the Output You Desired
Have Tweeted Your Code
Check the above Link
<div class="row" style="display:table">
<div id="sidebar" class="col-xs-3" style="display:table-cell;float:none"><div>sidebar</div></div>
<div class="col-xs-3" style="display:table-cell;float:none">content content content content content content content content content content content content content content content</div>
</div>
I'm really not a front end developer, but
I need to create an element (depicted below in red)
that remains relative to the page (as indicated by the line, so it basically stays in the same place on the page when I change the window proportions)
but is out of the flow of the rest of the page (so that the fieldsets, starting with "cash management" sit under the "Investing Magazine" title )
How do I do this please?
There probably a few ways to do this but here's a couple for you.
Option 1 using floats:
Treat the main content and the red side block as two columns. Float them both, give them a width and put them in a container.
HTML
<div class="row">
<section>
<h1>Investing Magazine</h1>
<p>Your content here</p>
</section>
<aside>
<p>The side block here</p>
</aside>
</div>
CSS
.row:before, .row:after {
content: " ";
display: table;
line-height: 0; }
.row:after { clear: both; }
.row { *zoom: 1; }
section {
float: left;
width: 80%; }
aside {
float: left;
width:20%;
background: red; }
See fiddle: http://jsfiddle.net/sntmW/
Option 2 using positioning:
Absolutely position the red block to place it exactly where you want.
HTML
<section>
<h1>Investing Magazine</h1>
<p>Your content here</p>
</section>
<aside>
<p>The side block here</p>
</aside>
CSS
section { width: 80%; }
aside {
position: absolute;
width:20%;
top:0; right:0;
background: red; }
See fiddle: http://jsfiddle.net/CHr7A/
I have multiple elements in the a single div.
I want to align one element as "text-align: right" and another element "text-align: left"
Check the below code:
<div class="image_meaning" style="display: none; background-color: white; height: 35px; margin-left: 1px;">
<input type="checkbox" id="points" value="Temporal Filter" style="text-align: left; "/>
<label for="tempral_filter" style="text-align: left; ">Points</label>
<img style="text-align: right;" src="{{ STATIC_URL }}img/cross.png"/>-abc
<img style="text-align: right;" src="{{ STATIC_URL }}img/blue_triangle.png"/>-cde
</div>
but when I run the code it places both the element to the left.
any idea how to do it?
Answer
There are a few ways to solve your issue the most common one is using the css float property (as of 2016). The more modern ways are using flexbox or grid.
Solution using flexbox
You could use display: flex to do this.
Flexbox is only supported by newer browsers, If IE (9 and below) is your friend please stay away from this method.
Example html:
<div class="wrapper">
<div class="block"></div>
<div class="block"></div>
</div>
Example css:
.wrapper { display: flex; }
.block { width: 50%; }
Live demo.
Solution using grid
You could use the new display: grid to do this.
Grid layout is only supported by the most modern browsers (Sep 2017), If you are building on evergreen browsers then great, if not use flex.
Example html:
<div class="wrapper">
<div class="block"></div>
<div class="block"></div>
</div>
Example css:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
}
Live demo.
Solution using float
The css float property is the classic way to do this and can be dated back to prehistoric times so it supports basically every browser. The only caveat to this would be the clearfix issue (see below).
Example html:
<div class="wrapper">
<div class="block-left"></div>
<div class="block-right"></div>
</div>
Example css:
.block-left { float: left; }
.block-right { float: right; }
Please be aware that floated elements cause their parent to disregard them when it comes to their height. If that is an issue (usually it is), you can use the clearfix hack to solve this situation.
You would define it like so:
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after { clear: both; }
And then on your parent element:
<div class="wrapper cf">
This will allow the parent to correctly receive the floated elements height.
Read more about what is the clearfix hack.
Live demo.
Other solutions
Solution using inline-block
You could also possibly use the inline-block property to put your elements side by side.
Note that the inline-block option will need to account for white space in the html between the blocks. To counter this, either remove the space like below, add a negative margin or define the font-size on the parent as 0.
Example html:
<div class="wrapper">
<div class="block"></div><div class="block"></div>
</div>
Example css:
.block { display: inline-block; }
/* Optional zero font for wrapper
Then reset blocks to normal font-size */
.wrapper { font-size: 0; }
.block { font-size: 16px; }
/* Optional negative margin if you can't
remove space manually in the html.
Note that the number is per use case. */
.block { margin-left: -.25em; }
Live demo.
Solution using position: absolute
Another way to do it would be to absolutely position your elements with a relative container. This method has the issue of being less flexible than the others when building responsive layouts and alike.
Example html:
<div class="wrapper">
<div class="block block-left"></div>
<div class="block block-right"></div>
</div>
Example css:
.wrapper { position: relative; }
.block { position: absolute; }
.block-left { left: 0; }
.block-right { right: 0; }
Live demo.
Why your solution is not working
You are using the text-align css property which will effect inline elements and text but it can't be used to shift the element like you would with the float property.
The text-align property effects the children of the element it is applied to.
Use float: left and float: right instead of text-align
Im trying to create a new master page without using a table and its causing me a headache.
Its very nearly there, I just need to make the 'Messages' and 'Content' divs full width so the 'Menu' div, plus the 'Messages' and 'Content' div are the same width (100% of the screen) as the 'Top' div.
I have set up a jsFiddle, can anyone give me some pointers?
http://i.stack.imgur.com/d1HO5.png
http://jsfiddle.net/CJRv5/
Im happy to change HTML a bit but the following must be considered:
menu is 130px wide, the rest of the content must fill remaining window width - no 960 grid!
Simplest (unintuitive) way, just change
#divMasterSubContainer
{
float: left;
...
to
#divMasterSubContainer
{
overflow:hidden;
...
http://jsfiddle.net/CJRv5/2/
Ref http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
^ you need to make sure that the width of menu + width of messages/content is not more than the width of the container in which they reside. Do something like this
div { border: 0; margin: 0; padding: 0;{
#content {
width: 100%;
}
.clear-both { clear: both; }
.float-left { float: left; }
#menu { width: 20%; }
#main { width: 80%; }
<div id="content">
<div id="menu" class="float-left">
<p>menu</p>
</div>
<div id="main" class="float-left">
<div id="message"><p>messages</p></div>
<div id="content"><p>content</p></div>
</div>
<div class="clear-both"></div>
</div>