I want a basic full width layout with a 250px sidebar on the right. Here's roughly what I want:
<-------Content-------><--250px sidebar-->
<---------------100% width--------------->
Is this possible without Javascript or tables?
Yes, of course:
see http://jsfiddle.net/whTwg/4/
HTML:
<div id="wrapper">
<div id="sidebar-wrapper">
<div id="sidebar">Sidebar</div>
</div>
<div id="main-wrapper">
<div id="main">Main</div>
</div>
</div>
CSS:
#wrapper{
overflow:hidden;
}
#main-wrapper{
overflow:hidden;
}
#sidebar-wrapper{
float:right;
width:250px;
max-width:50%;/* You should set a max-width */
}
/*Here you can add borders, paddings and margins */
#main{
background:#aaf;
border:10px solid blue;
}
#sidebar{
background:#faa;
border:10px solid red;
}
Note: instead of #wrapper{overflow:hidden} (or something different than visible), you could add <div style="clear:both"></div> after main-wrapper.
Edit:
You are right, I forgot to add #main-wrapper{overflow:hidden;}. I have fixed the link and the code.
<div style="float: left">
..... content ......
<div>
<div style="float: right; width: 250px;">
..... sidebar .....
</div>
<div class="clear"></div>
... other content
This is the CSS for the class="clear":
div.clear {
clear:both;
}
You can set the first div width when you see how much space you have.
Is this helpful?
Related
Related: Use CSS to reorder DIVs
In my case, my HTML looks more like this:
<div class="container">
<div class="gallery">
<div class="image-wrap"> stuff </div>
<div class="thumbnails"> stuff </div>
</div>
<div class="info"> stuff </div>
</div>
I want .thumbnails and .info to switch places visually, but without affecting the styles or position of anything else. The all the html (and most of the css) inside .gallery is generated by a plugin that I can't edit.
This is what you can assume about the styling:
.thumbnails {
width: 100%;
height: 100px;
}
.info {
width: 100%;
min-height: 125px;
}
I considered using absolute positioning, but .info has a variable height because it has variable content length.
I'd prefer pure a CSS solution, but I'm open to jQuery/JS solutions if necessary.
If .info has a known height, then you can trick this using the float properties and behavior:
.thumbnails {
float:left;
clear:left;
width:100%;
}
.gallery:before {
content:'';
float:left;
height:130px;/* this should be the height and margins used by .info .... but js do not access pseudo element */
}
.info {
height:100px;
display:flex;
border:solid tomato;
justify-content:center;
align-items:center;
background:turquoise;
color:white;
font-size:2em;
}
<div class="container">
<div class="gallery">
<div class="image-wrap"> image-wrap </div>
<div class="thumbnails"> thumbnails </div>
</div>
<div class="info"> info </div>
</div>
codepen to play with
You can use flexbox to reorder flex items, and display: contents to make all the elements participate in the same flex formatting context.
.container {
display: flex;
flex-direction: column;
}
.gallery {
display: contents;
}
.thumbnails {
height: 100px;
order: 1;
}
.info {
min-height: 125px;
}
<div class="container">
<div class="gallery">
<div class="image-wrap"> image-wrap </div>
<div class="thumbnails"> thumbnails </div>
</div>
<div class="info"> info </div>
</div>
Currently, display: contents is only supported by Firefox.
Right, so I don't think you'll be able to achieve this just with css, because you want to actually change the structure... Javascript definitely will be required here:
(function($) {
$(function() {
$(".container").each(function() {
var container = $(this);
var gallery = container.children(".gallery");
container.children(".info").appendTo(gallery);
gallery.children(".thumbnails").appendTo(container);
});
});
})(jQuery);
Hope this helps!
I think similar question must have been asked already, but I don't know how to find it...
I want to create a multi-column HTML layout with autostretching columns. Let's say 2 columns. When there's only one column on a page it fills 100% of container width, when I add a second column of 25% the first one automatically squeeze to 75%.
<div class="wrapper">
<div class="content">...</div>
<div class="sidebar">...</div>
</div>
I'm sure this can be done with JavaScript (checking if second column exists), but what about plain CSS? Is it actually possible? I need to support IE 9+.
This can be done with css selectors:
.content{
width:100%;
}
.sidebar{
width:25%;
}
.content:not(:only-child){
width:75%;
}
Pen: http://codepen.io/vandervals/pen/zGqorj
I think this is far more elegant than the table solution and the support is really wide: http://caniuse.com/#search=only-child
You need something like following. Use display:table to parent and display:table-cell to child element.
.wrapper{
display:table;
width: 100%;
}
.content{
display:table-cell;
background-color:yellow;
}
.sidebar{
display:table-cell;
width:25%;
background-color:blue;
}
<div class="wrapper">
<div class="content">...</div>
<div class="sidebar">...</div>
</div>
Hope it helps.
I know you ask for a CSS solution, but here is a simple jQuery script to have a dynamic sizing (no matter the number of column, it will be divided and fit in the row).
$(document).ready(function() {
$('.row').each(function(k, v) {
var col = $('.column', this),
colNumber = col.length,
percent = 100 / colNumber;
console.log(percent);
col.css({'width' : percent + '%'});
});
});
* {
box-sizing: border-box;
}
.wrapper {
width: 960px;
margin: 0 auto;
}
.column {
float: left;
height: 200px;
margin: 0 auto;
border: 1px solid black;
background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row">
<div class="column"></div>
<div class="column"></div>
</div>
<div class="row">
<div class="column"></div>
</div>
<div class="row">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
</div>
I'm working on a mobile site page, I got two divs in a parent roughly set up like so:
<div id="parent">
<div id="left" style="float:left;"> </div>
<div id="right" style="float:right;"> </div>
</div>
They both have a min-width and margin set.
They display next to each other fine. But I want to set it up so that if the width is too small (say on an iphone), they span two lines and take up the whole width of the page by itself.
At the moment, I can't get the width to dynamic jump to 100% of the page when they span two lines. All it does is the left div sticks to the left and the right div to the right.
I've read somewhere about using inline block, and toying with the overflow and position but I can't get it to work.
Any tips or suggestions?
Thanks.
edit:
Here's the css I'm using at the moment
<div style="width:96%;">
<div style="float:left; min-width:220px; margin:10px auto 5px auto;">
content
</div>
<div style="float:right; min-width:230px; margin:0px auto 5px auto;">
content
</div>
</div>
Try this
CSS
#parent {
border : 2px solid #000;
overflow:hidden;
}
.parent div {
min-height: 200px;
padding: 10px;
}
#left {
background-color: gray;
float:left;
margin-right:20px;
width:140px;
}
#right {
background-color: white;
overflow:hidden;
margin:10px;
min-height:170px;
}
#media screen and (max-width: 400px) {
#left {
float: none;
margin-right:0;
width:auto;
border:0;
}
}
HTML
<div id="parent">
<div id="left">left</div>
<div id="right">right</div>
</div>
DEMO
You have to set media queries for the style tags. Take the CSS out of the inline and set them in the stylesheet instead.
#media only screen and (min-width: 481px) {
#left {float:left;}
#right {float:right;}
}
The DIVs then only float to the left and right if the screen is wider than 480px:
<div id="parent">
<div id="left" > </div>
<div id="right"> </div>
</div>
I'm trying to create an efect that's change de background color from left to right.
I have created this: http://jsfiddle.net/kT95d/58/
<style>
#div1{
height:200px;
width:200px;
background-color:green;
float:left;
}
#back {
width:0px;
height:200px;
background-color:Gray;
display: block;
}
<script>
$('#div1').mouseover(function (){
$('#back').animate({width: '200px'}, 1000);
});
</script>
<div id="div1">
<div id="back">
That was amazing!
</div>
</div>
But, i want the text in horizontal and how you can see, this is vertical and after the effect go to horizontal.
I don't know if this is the best way to do this. Can help me?
Thanks!!
Here you go. I believe this is what you want:
http://jsfiddle.net/WVWKE/
Change is here:
<div id="div1">
<div style="position:absolute">That was amazing!</div>
<div id="back">
</div>
</div>
The problem before was that the text was inside your zero width div, so it was breaking onto multiple lines to try to fit. Then when you animated the width back to 200, the text had room to expand again.
Here we move the text out of the animated background div and into the parent div, then we give it a position:absolute to take it out of the flow so it doesn't take up space. You can of course move that inline style to your CSS, and probably should.
<style>
#div1{
margin-top: -200px;
height:200px;
width:200px;
background-color:green;
}
#back {
width:0px;
height:200px;
background-color:Gray;
display: block;
}
</style>
<script>
$('#div1').mouseover(function (){
$('#back').animate({width: '200px'}, 1000);
});
</script>
<div id="text">
That was amazing!
</div>
<div id="div1">
<div id="back">
</div>
</div>
I am using a jQuery plugin called Sticky Floating Box to have a div that floats but is contained within the other div. It appears to work however it doesn't stay within the containing div. I have looked over the scripts demo page but cannot figure out what I am doing wrong.
Here is the JS Initialize Code:
$(function() {
jQuery('.addthis').stickyfloat('update',{ duration:0});
});
Here is a jsFiddle showing the issue.
HTML and CSS Below:
<div class="header"> HEADER </div>
<div class="container">
<div class="addthis">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_button_email"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=undefined"></script>
<!-- AddThis Button END -->
</div>
<p>ICONS SHOULD STAY <BR> WITHIN THIS GRAY BOX<p>
</div>
<div class="footer"> SHOULD NOT GO BELOW THIS LINE</div>
.header{
width:400px;
background: #F00;
height:100px;
margin:0 auto;
}
.container{
position:relative;
height:400px;
width:400px;
margin:0 auto;
background: #999;
}
.footer{
height:700px;
width:400px;
background: #F0F;
margin:0 auto;
}
.addthis{
position:absolute;
top:0;
left:-50px;
}
I had to do three things to get the jsFiddle to work properly:
stickyfloat function needs to be called after the page is ready (and remove the 'update' part).
jQuery(document).ready(function() {
jQuery('.addthis').stickyfloat({ duration:0});
});
Add the following css rule:
.addthis_floating_style
{
position:inherit !important;
}
Give the .addthis div an explicit height and width:
.addthis
{
position:absolute;
top:0;
left:-50px;
width :36px;
height:222px;
}