this is the layout I'm working with. what I'm trying to achieve is that as the window is collapsed I want the div on the right to collapse allowing the inner elements to be pushed down.
my css is as follows:
#left-div {
display: block;
float: left;
}
#right-div {
display: block;
float: left;
}
#right-div elements {
display: inline-block;
}
I basically want to achieve what's going on in the last photo without the right div getting moved down first. any ideas?
Edited to remove pictures as I've come to an answer and I'm not sure if I was supposed to post them.
After taking various stabs at it, appears that JavaScript/jQuery may be your only solution...
Related
Hi so I want to make a column based grid (two-column) using float and clear.
The idea is to give left block a float:left and clear:left,
while giving right block a float:right and clear:right.
.left-block {
float: left;
clear: left;
}
.right-block {
float: right;
clear: right;
}
But it turns out this is not working. Can you tell me why this won't work?
Jsfiddle link
And why does this one work perfect.
It is not possible for the floating elements to get above the preceding element on the other side (because it's cleared). So there's no way to get the right stacking effect with only using floats.
For further understanding how floating and clearing works in detail I'd recommend reading the specification.
The only way so far to get the masonry layout without additional containers is using CSS columns. You can find an example here.
I'd just have the floats for the divs you're making and add the clear on the containing container so it blocks it out. This is untested off the top of my head but hope it works.
CSS:
.wrapper {
width: 70%;
}
.wrapperClear {
content: "";
display: table;
clear: both;
}
.left-block {
float: left;
width: 50%;
}
.right-block {
float: right;
width: 50%;
}
HTML:
<div class="wrapper wrapperClear">
<div class="left-block"></div>
<div class="right-block"></div>
</div>
I'm creating a basic generic web page with a photo gallery as practice here, but for some reason I cannot get the gallery div to float next to the sidebar div so that there isn't a big empty space above it. Floating them just destroys everything. When I inspect element it shows that there's a margin taking up all of the space to the right of the sidebar/above to the gallery, but I've looked through my css over and over and can't find where that margin could be coming from. I'm not 100% sure that's what is causing the issue though.
If anyone knows how I can make this position correctly it would be much appreciated. I feel like I've tried everything and I'm just not getting it.
Here is the link to the code on jsfiddle:
https://jsfiddle.net/laurynm/h6mu6hsb/
.gallery {
width: 80%;
position: relative;
}
#sidebar {
position: relative;
width: 230px;
}
Try this https://jsfiddle.net/h6mu6hsb/4/
#sidebar {
float: left;
position: relative;
width: 230px;
}
I took a stab in the dark, and made a jsfiddle demo for you to try out. In essence, I gathered different sections in wrappers, converted them to inline-block, and hope it looks kinda like what you wanted.
How about something like this so you dont have horizontal scrolling problems:
http://jsfiddle.net/espriella/fdmdwpp5/
Using display as table-cell
.sidebar{
min-width: 200px;
display: table-cell;
}
.gallery{
display: table-cell;
width: 100%;
}
I'm currently trying to figure out a way with CSS to layout semantically-defined multi-image figures, each image possibly with their own subcaptions. The semantic for this kind of figure is an outer <figure> div containing multiple <figure class=subfigure> divs. Each of the .subfigure divs contains exactly one <img> followed by a <figcaption class=subfigcaption>.
Here is a minimal working example on JSFiddle
Goal: I'm trying to achieve a kind of layout that is common in print media; each .subfigure is vertically aligned by the baseline of its unique <img> element, while its own .subfigcaption can run as long as it needs without affecting the relative positions of the <img> amongst each subfigure.
However, with my current layout code, I can only relatively align each .subfigure as a whole: the <img> and .subfigcaption is treated as an aggregate block. The result is, as can be seen in my working example, that a long subcaption can ruin the image alignments between the subfigures.
I'd really like to find a CSS solution that does not require me to change the semantically-relavant HTML. I've considered using the table layout format, but I don't see how to place the table rows correctly given the way my html is currently organized. Also, this style would be applied to a large number of content, so I can't exactly tweak each specific figure by hand.
Note: doing figure>figure {vertical-align: top;} looks okay for this example but isn't what I'm looking for. The goal is to mimic a print convention, that we align at the bottom of the images, not the top. In fact, the more exact goal is to have all the .subfigcaptions start at a common baseline, regardless of the relative size of the images.
Current layout
Desired layout
Err, am I missing something, or does just removing the vertical-align: middle give you the desired results:
http://jsfiddle.net/LzUaC/9/
Here is the demo:
http://jsfiddle.net/salman/LzUaC/29/
And the idea:
Use display: inline-block for sub figures so that:
They stack sideways
Their baselines align
Place images with width: 100%; height: auto; inside sub figures
Optionally set vertical-align: bottom; to remove those few pixels at the bottom
Place captions with float: left; inside sub figures so that:
They move out of the flow and do not affect the height of sub figure
Set width: 100%; to make them stretch all the way across sub figure
Use clear: both on the last figure caption (I think you should however it does not seem to have any effect)
The CSS:
figure {
margin: 1em 0;
text-align: center;
background-color: #CCC;
}
figure > figure {
display: inline-block;
background-color: #AAA;
}
figure > figure > img {
width: 100%;
height: auto;
vertical-align: bottom;
}
figure > figure > figcaption {
float: left;
width: 100%;
background-color: #999;
}
figure > figure + figcaption {
clear: both;
background-color: #666;
}
/*
* for testing
*/
figure > figure:nth-child(1) {
width: 31%;
}
figure > figure:nth-child(2) {
width: 31%;
}
figure > figure:nth-child(3) {
width: 25%;
}
I know this might scare you at first but give it a chance :-P You can always replace the tables with divs contenting display:table and table-cell.
This is about the only way I could think of to achieve this effect.
http://jsfiddle.net/LzUaC/5/
CSS
.fig-img{width:40%; text-align:center; vertical-align:bottom;}
.fig-img img{width:100%;}
.fig-caption{vertical-align:top;}
.fig-summary{text-align:center; padding-top:40px;}
Removing
figure>figure {
vertical-align : middle;
}
figure>figcaption {
display : -webkit-box;
display : -moz-box;
display : -ms-flexbox;
display : -webkit-flex;
display : flex;
}
and Adding
figure>figure>figcaption {
vertical-align : top;
display : inline-block;
}
figure>figcaption {
text-align : center;
}
does the magic: running demo
Not using flex, and works everywhere... except that in IE (what a surprise...)
I am having some difficulty getting this inline-block div to center align properly as the two elements above it do.
The div which I am referring specifically to is the one which contains the three "social" icons at the bottom section underneath 'Interact with me' (please see here)
I assume that it is the float on the icons that is throwing it off whack which is why I have the wrapper div around it (.interact-social) to try to offset it, but it doesn't seem to be working as it should...? have already spent the better part of the day just trying to figure it out, to no avail.. :(
Any assistance greatly appreciated as usual, thanks!
edit:
Here was the relevant code for anyone interested:
.social {
height: 50px;
list-style-type: none;
margin: 0 auto;
padding: 0;
text-align: center;
}
was simply missing a width declaration (which I had unsuccessfully tried apply to other divs)!
Add this to your code:
.social
{
width:240px;
}
Try making these changes to your css:
.interact {
width:95%;
}
.social li {
float:left;
}
.interact-social {
/*width:30%; Remove this width */
}
You can see an attempt at what I'm trying to do here: http://rjlacount.com/clients/GreenTree/
I want the navigation li's to determine padding automatically so they can stretch across the entire width of the inner wrapper. So, if I added another li or took one out, they would still be centered and the padding of each li would just increase/decrease to make up for it.
Right now I'm floating the last navigation li to the right and adding padding to each one to try to get it as close to full-length as possible. So it's almost how I want it to look, but I have a space between the last two items that I'd like to get rid of.
Is this possible? Thanks for any help.
I don't believe this will work in < IE8, but you could always provide a float or display: inline-block fallback to those browsers using a conditional stylesheet.
Example
CSS
ul {
display: table;
width: 100%;
}
ul li {
display: table-cell;
}
ul li a {
display: block;
width: 100%;
height: 100%;
text-align: center;
}
jsFiddle.
jsFiddle with one more li, you'll notice the CSS is constant :P