I,ve been trying to do this without much success.
How can I, using yui-grids make a template like yui-t1 (the one with a sidebar of 160px in the left), but with also a sidebar to the right of the same width?
The center column should be liquid...
You could try this liquid layout instead?
You can adapt and extend this example. Here's the HTML for 200px fixed / fluid content / layout preset column:
<div id="bd">
<div id="yui-main">
<div class="yui-b yui-b1">
<div class="yui-u-main">
<div class="yui-u">
<p>Main column: fluid width</p>
</div>
</div>
<div class="yui-u">
<p>Left column: 200px fixed</b>
</div>
</div>
</div>
<div class="yui-b">
<p>Third column: fixed width, follows template preset.</p>
</div>
</div>
CSS is simple as:
.yui-b1 .yui-u-main {
float: left;
width: 100%;
}
.yui-b1 .yui-u {
float: left;
/* Width of left column */
width: 200px;
margin-left: -100%;
}
.yui-b1 .yui-u-main .yui-u {
float: none;
width: auto;
/* Width of left column + 13px margin (default YUI margin) */
margin-left: 213px;
}
According to this page, a 180px-wide right sidebar has the default class yui-t4. I assume you could go into the CSS and change this pixel value to 160.
You chose Matthew's answer but he didn't answer your question. Though he may have solved your problem, someone reading this question in the future may still want to know the answer. This sort of thing, seems to me,discourages some from giving or developing an answer & would compel someone else to repeat this question.
Have you tried using the YUI grids layout http://developer.yahoo.com/yui/examples/grids/grids-gb_source.html
but then adding an extra class on to the 2nd yui-u called .main or a class of .last on to the 3rd yui-u.
You could add the below overwriting style of
.yui-gb .yui-u {
width: 19%;
}
.yui-gb .main {
width: 59%;
}
to get 3 cols with widths 19/59/19
That any use to you?
Related
I have been trying to build a website having a 3 column layout. All of the body is given a margin:0 auto to keep it at the centre, and has a minimum width of 1218px.
Now, what I want to do is reposition the right column in such a way the it goes below the left column without affecting the centre column. A live example would be twitter home page, where at the left I can see my profile and trends, the centre column features the tweets and the right column shows suggestions on a 1366x768 screen, now if I change the screen size to 1024x768, the column of suggestions at right goes down below the left column but the central timeline is unaffected.
The definition would be:
<div class="containter" style="margin:0px auto;">
<div class="left-col" style="width:290px; float:left;">Left Stuff goes here </div>
<div class="center-col" style="width:590px; float:right;"> Center body </div>
<div class="right-col" style="width:290px; float:right;">right Stuff goes here </div>
</div>
Now note that the central column has a right float, copied from twitter.
I can't use media queries for that since the website is going to deal with a lot of old browsers and also I would like to avoid JavaScript if possible.
Any help?
You can't do that with "min-width" of the main container. You must use "max-width" since you want to make sure something happens when the screen width gets more narrow. And the main column (in the center) has to be left-floated, not right. Here's a possible solution. However the whole questions seems weird to me since you want to make a responsive layout in an old browser that doesn't support responsive CSS.
<style>
.container {
max-width: 1218px;
}
.leftColumn {
float: left;
width: 300px;
height: 500px;
background-color: brown;
}
.mainColumn {
float: left;
width: 700px;
height: 500px;
background-color: darkgreen;
}
.suggestions {
float: left;
width: 218px;
height: 500px;
background-color: darkorange;
}
.cleaner {
clear: both;
}
</style>
<div class="container">
<div class="leftColumn">
LEFT
</div>
<div class="mainColumn">
MAIN
</div>
<div class="suggestions">
SUGGESTIONS
</div>
<div class="cleaner"></div>
</div>
I've been using bootstrap for quite a while now and I'm facing this problem for the first time. I really don't know how to do this. I have found many people suggesting to just remove padding-left on the first-child element and the last one. I also tried this way at first but then I realized that it couldn't work, since the .col class has the box-sizing: border-box; property which makes the div to have padding included in the width. (Which is obviously necessary if you want a clean layout using width: 25%;).
So, if you remove these padding on the left, the first and last div are going to be 15px larger, which breaks the layout... I want every col div to have exactly the same width, I want them to fit 100% of the row and have no padding left or right. Is there a class that I'm not aware of in bootstrap?
Is it possible while keeping the Bootstrap 3 templating system?
Code example:
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
I finaly found a way around it by creating my own class, that I believe respect the way bootstrap made their layouting system. Here was the best and minimal way to do it:
CSS
.layout-no-gutter-around.is-4-columns > .col-md-3{
margin: 0 5px;
}
.layout-no-gutter-around.is-4-columns > .col-md-3:first-child{
margin-left: 0;
padding-left: 0;
width: calc(25% - 15px);
}
.layout-no-gutter-around.is-4-columns > .col-md-3:last-child{
margin-right: 0;
padding-right: 0;
width: calc(25% - 15px);
}
HTML
<div class="row layout-no-gutter-around is-4-colums">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
This way, I achieve exactly what I want, it's reusable and respect the Twitter's Bootstrap thinking (I believe). Thanks to Deja Vu who leaded me to the calc thiking, I believe it's a good way to achieve this. But you cannot put 15 margin left on the first child and right on the last child since that would still create a gutter around but using the margin.
I wasn't able to solve your problem but I have 2 ideas and maybe it will lead you to the solution.
Replace paddings with margins
html
<div class="row" id="optionOne">
<div class="col-md-3">first child</div>
<div class="col-md-3">child</div>
<div class="col-md-3">child</div>
<div class="col-md-3">last child</div>
</div>
css
#optionOne > div:first-child {
background-color: red; /* for display purposes only */
padding-left: 0px;
margin-left: 15px;
}
#optionOne > div:last-child {
background-color: yellow; /* for display purposes only */
padding-right: 0px;
margin-right: 15px;
}
Not sure if that would satisfy your design requirements.
recalc width
css
#media (min-width: 992px) {
#optionTwo > div:first-child {
background-color: green; /* for display purposes only */
padding-left: 0px;
}
#optionTwo > div:last-child {
background-color: grey; /* for display purposes only */
padding-right: 0px;
}
#optionTwo > div:not(:first-child):not(:last-child) {
background-color: blue; /* for display purposes only */
width: calc(25% + 15px);
}
}
The problem I faced was - in both cases last child falls onto the separate row:
fiddle.
Hope this will give you some food-for-thought.
I could not comment on Yann Chabot's post, but as an extension on it, I would recommend to use escape values. If you don't use this, Chrome recalculates the width to 10% instead of the correct width.
CSS
width: calc(~"25% - 15px");
I'm new to CSS and have a somewhat general question, but with a specific purpose.
Here is the webpage in question: http://www.lymemd.org/indexmm6.php
I have several DIVs: #BannerArea, #BannerinLeft, and #BannerinRight, all which format everything in the green square. I'm looking to split everything up and so something like this:
If anyone could help point me in the right direction in terms of what tags I'll need to do and what I'll need to get rid of, I would be very grateful. I have tried many times to get everything right, but I always end up making something worse.
Thanks very much.
The simplest way would be to make two columns, the left one including the Twitter and What's New div, and the right one including the Support Us and Diane Rehm divs. These two columns will have to float, so make sure they are in a container of the correct width. The top div is easy.
Here's a jsfiddle: http://jsfiddle.net/83ngD/7/
The basic HTML:
<div id="wrapper">
<div id="topgreen"></div>
<div id="leftcolumn">
<div id="twitter"></div>
<div id="whatsnew"></div>
</div>
<div id="rightcolumn">
<div id="supportus"></div>
<div id="dianerehm"></div>
</div>
</div>
The basic CSS:
#wrapper {
width: 960px; /*/ example width /*/
margin: 0 auto; /*/ centers the div /*/
}
#topgreen {
width: 100%;
height: 50px; /*/ example height /*/
}
#leftcolumn {
width: 50%;
float: left;
}
#rightcolumn {
width: 50%;
float: left;
}
Now just fill the other divs with the content you want. The code above will give you the layout from your picture, but very basic.
I am trying to create something like a gallery that shows different number of images per row based on the width of the browser. This has already been achieved using overflow: hidden in the outer div and float: left in the inner div.
However, what happens with this is that my images are always aligned to the left, leaving alot of whitespace on the right. How do I make it such that the gallery is always centered in the screen no matter how many images there are per row.
My code is on http://codepen.io/anon/pen/KzqAs
Thank you very much. :)
How about this: http://codepen.io/anon/full/mtBbF
HTML
<div class="container">
<div class="red box">red</div>
<div class="blue box">blue</div>
<div class="black box">black</div>
</div>
CSS
body{
text-align:center; /*You would need to define this in a parent of .container*/
}
.container{
display: inline-block;
margin: 0 auto;
text-align: left;
}
.box {
width: 300px;
height: 300px;
float: left;
}
Demonstration
You need to use an id(or class) on the main div. Set width: 300+px and margin: auto
Also your boxes should be with display: inline-block to allow them to begave "inline"
I have changed colors of the boxes a bit for better visibility.
Related (possibly duplicate) questions:
How do I achieve equal height divs with HTML / CSS ?
Make Two Floated CSS Elements the Same Height
Hello, every one,
I tried for hours to create a stretchable 2 columns div but without any luck. here is my html code and my css code below it
<div class="two_cols_container">
<div class="two_cols">
<div class="left-col">
test
</div>
<div class="right-col">
test
</div>
</div>
</div>
my css code is
.two_cols_container {
width: 100%;
height: 100%;
}
.two_cols {
position: relative;
margin: 0 auto;
border: 1px solid black;
height: 100%;
height: auto !important;
min-height: 100%;
}
.two_cols .left-col {
/*position: absolute;
left: 0;*/
float: left;
}
.two_cols .right-col {
/*position: absolute;
right: 0;*/
float: right;
}
any idea?
A: either use float OR absolute positioning to make your columns. not both. You can just float both the columns to the left and it should be ok with no absolute positioning.
B: you're big problem is the columns can't be next to each other if both of their' widths are 100%. There's no way they can sit side by side in their containing element when they both take up the whole width. Set the width to at most 50%, but I'd go with a little lower to account for some browser bugs.
EDIT: I agree with Sneakiness, wet the width to something lower than 50%, because the margins and padding have to fit too.
There's
Tables ( you probably wouldn't want to rely on this )
Faux Columns ( the most practical way, faking columns going down using images - see http://www.alistapart.com/articles/fauxcolumns/ )
Border Trick ( a little complex but this only works for solid colors )
Padding / Margin / Clipping ( another complex one I wouldn't recommend )
I'd go with #2. If you need colors that are backgrounds of those columns to go all the way down, set a background on the container of those columns and make sure it repeats vertically, e.g,
div#wrapper { background:url(/images/faux.gif) repeat-y; }
If the columns are floated make sure to have overflow:hidden and a hasLayout trigger for IE like a width.
By the way since you have floats, apply overflow:hidden to .two_cols selector and add this rule:
html, body { height:100%; }
I found this method to be the simplest and most effective of all equal-height two-column layouts. You don't have to fake anything, and it Just Works.
If you mean that you want a fluid two-column layout, you need to set margins for both columns separately to position them both on the page.
You can use div style property to create as many columns you need, with what ever CSS effect you need :
<div style=”width: 100%;”>
<div id=”left” style=”float: left;">
<--! your text here -->
</div>
<div id=”right” style=”float: right;">
<--! your text here -->
</div>
</div>
Source and example : WordPress Tutorial Series - Basics about HTML and CSS