I have two columns which are created using CSS3 Columns. Here is my code:
HTML:
<div class="container">
<div class="column1">
<!-- content -->
</div>
<div class="column2">
<!-- content -->
</div>
</div>
CSS:
.container {
column-count: 2;
}
All is good so far. However, the way the browser creates the columns is a problem for me. Because it creates them to be equal height, some of the content from .column1 has been shifted into .column2, at the top. Instead of being at the top of .column2, I want it at the bottom. Here is an image to visualise what I mean:
What would I do to shift the content at the top of .column2 (from .column1) to the bottom of .column2? (I cannot move the HTML code, although it's fine to change the CSS so it's not using columns or whatever).
Related
In the picture is what I am trying to achieve.
When resized, inner elements should stay as they are:
This is what I tried:
<div style="width:100%;text-align:center;">
<div style="width:80%;margin-left:auto;margin-right:auto;">
<div style="float:left;">
</div>
<div style="float:left;">
</div>
<div style="float:left;">
</div>
<div style="float:left;">
</div>
<div style="float:left;">
</div>
...
<div>
</div>
But when I resize it, it get like 2 in a row, or 5 in a row, depending on how I resize the screen. Should be 3 all the time, centered. Width of inner elements not to be changed.
Add classes if you can. HTML:
<div class="one">
<div class="two">
<div class="three">
</div>
<div class="three">
</div>
<div class="three">
</div>
<div class="three">
</div>
<div class="three">
</div>
...
<div>
</div>
...and CSS:
<style>
.one {width:100%;text-align:center;}
.two {width:Npx;margin: 0 auto;"}
.three {width:31%;margin:1% 10px;height:100px;float:left;box-sizing:border-box;}
.two .three:nth-of-type(3n + 1) {clear:left}
</style>
the inner div's need a fixed width (here, 1% on right and left) for a total width of 33%. Fixing height makes this work for variable content, otherwise, it looks off. The "nth-of-type) selector is a failsafe in case you can't use a fixed height.
Elaborating on using a fixed height, if you decide to parse your output with javascript to hide certain elements, they will still be counted in the "nth-child" iterative loop, which would break your layout. Using a fixed height and exact percentage widths should almost always work.
You'll note that there's 1% left over, but it's small enough not to be an issue.
EDIT:
Edited to add box-sizing:border-box;. Setting the box-sizing to border-box will include any added padding or border thickness to size, because if you add padding without it, your layout will break.
EDIT 2:
Reviewing OP's question, there is a requirement for the inner content to maintain a fixed width. The only way to do that is to declare a fixed with for .two or .three. Declaring a fixed width for .three will not center the content without additional css manipulation, so add a fixed width to .two.
Please note that a fixed width is a terrible idea for rendering in mobile, if your application needs that. I would suggest using a media query as follows, and swapping to the more popular two column layout for mobile:
<style>
#media screen and (max-width: 768px) { /* or whatever width... */
.two {width:auto;margin:auto;}
.three {width:46%;margin:2% 10px;}
.two .three:nth-of-type(3n + 1) {clear:none} /*cancels above */
.two .three:nth-of-type(odd) {clear:left} /* every two, clear left */
}
</style>
This will get you on the right track....
I need a section in bootstrap where there are two columns (6 and 6) in a row.
The left 6 column div needs to have the fluid effect where its contains stretch to the browser window's left edge.
The right 6 column div needs its contents to match/be kept within the right-side confines of the other sections of the page that have a normal (non-fluid) container class (which has a width of 1170px).
How can I best achieve this effect?
This is for 1170px wide container, you need media queries for the rest of the sizes. Hopefully helps.
CSS:
.stretch-left {
margin-left: calc((100vw - 1170px) / -2);
}
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 stretch-left">
content
</div>
<div class="col-md-6">
content
</div>
</div>
</div>
I'm using Bootstrap 3 with a fixed width.
My footer exist of two colums (left & right) with each a different background color.
I want the content of my footer to be wrapped in the '.container' so it aligns with the rest of the content on my website.
Now here is the thing I can't get to work:
I want to make it look like the footer has a full width. So left of the '.container' should be one color and the right an other.
Plus when the resolution gets below a certain point the two colums should shift under each other but with the background colors still fullwidth.
See picuture to make it all more clear.
picture
My first thought was using a background image on '.container-wrapper' and then on the mobile version a different background aligned from the middle. Like this:
CSS
.kleur {
background:url(img/test-bg.jpg);
background-repeat:repeat-y;
background-position:center; }
#media (max-width: 992px) {
.kleur {
background:url(img/test-bg2.jpg);
background-repeat:repeat-x;
background-position:center; }
}
HTML
<div class="fullwidthcontainer kleur">
<div class="kleur-links" style="background:#cfcfcf; height:100%; width:100%"></div>
<div class="container">
<div class="row">
<div class="col-md-8" style="background:#feff8b;"> <br/><br/><br/> <br/><br/><br/> </div>
<div class="col-md-4" style="background:#8bd7ff;"> <br/><br/><br/> <br/><br/><br/> </div>
</div>
</div>
Link to working example, scroll down
This works fine for Desktop, but for Mobile it only works if the two columns have exactly the same height. I really like the height to be variable, but don't have any idea how...
Anyone any thought?
This is a fluid solution:
Fluid solution without backgrounds
But I rather have a solution with a fixed width
I have two divs on a page with the same height position. I'm trying to make them expandable, allot like what goes on in the WordPress dashboard area:
Now i've got the left div to expand but only with the right div staying at the same width. I need both to expand on zooming in and out.
any ideas how this is done?
I've been looking it up for the past hour but i cant find anything.
A link to a tutorial would be cool (good luck finding one).
EDIT:
Here guys, i found something similar: http://jsfiddle.net/Khez/2zLPF/embedded/result/
do you see how the two divs side by side expand? the green and blue ones...
If you want your divs to dynamically change depending on the width of their container, set the widths using percentages:
HTML:
<div class="column">
<div class="wrapper">
<p>Text</p>
</div>
</div>
<div class="column">
<div class="wrapper">
<p>Text</p>
</div>
</div>
CSS:
.column {
float: left;
width: 50%; }
.column div { margin: 0 20px; /* Set the spacing between the cells */ }
Preview: http://jsfiddle.net/Wexcode/F7h2C/
NOTE: Because you are setting the combined widths of the columns to 100%, you cannot add padding to .column if you want them to be on the same line. The inner div wrapper will allow you to add spacing between your two columns. You should apply all background attributes to .wrapper.
I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):