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 */
}
Related
my website is watersedgeofshelton.com and on the "floor plans" page I have two images side by side that use the code float:left
my problem is that I can not get them centered on the page and also still be side by side
thank you!
div#floorplans {
text-align: center;
}
div#admiral {
float: left;
padding-right: 20px;
}
div#clipper {
float: left;
}
Add below code to your CSS and check your page -
div#admiral,
div#clipper {
width: 50%;
}
and remove this one -
div#admiral {
padding-right: 20px;
}
First remove float from each div#admiral and div#clipper and then goto div#floorplans and add the following
div#floorplans {
text-align: center;
display: flex;
margin-left: 70px;
}
Hope this helps you.
1) Remove Float
2) use table or ul li (with horizontal nav and hiding bullets) for images to show side by side.
3) use "align-text:center"; if you want div the use "margin:0 auto"
Hope it help :-)
Why not try something like this?
Put the floating divs/images inside a wrapper set a width for the wrapper and set a margin auto for the wrapper!
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 have a div that contains two ul. I'd like to position the first ul on he right and the second ul on the center.
I cannot use absolute positioning since it makes me other problems in nested elements and in mobile view.
This is what I've done:
<div class="w">
<ul class="right"><li>a very very very long text</li></ul>
<ul class="center"><li>center</li></ul>
</div>
.w {
text-align: center;
display: inline-block;
width: 100%;
}
ul {
list-style-type:none;
margin: 0;
padding: 0;
}
li {
float: left;
}
.right {
float: right;
}
.center {
display: inline-block;
}
you can see jsfiddle here: http://jsfiddle.net/mF7XR/
The problem is that the centered ul is aligned to the middle between the left and the start of the right ul (see the example). Therefore it is not correctly centered. How can I center correct the second ul?
I am not sure whether you are good to go with javascript. Anyway, I did some work on it. Please have a look.
javascript
//Added Id to ul.center as "center"
function resize(){
var width = document.body.offsetWidth;
var center = document.getElementById('center');
center.style.marginLeft = (width/2) - (center.offsetWidth/2);
}
//Call the above function on "resize" and "load" events.
CSS
.center {
display: inline-block;
float:left;
}
Working Bin
Define the Width of centered elements then only you could get what you want. You could also define the margin as follows...
margin: 0 {number greater than right floated element}px 0 {number greater than left floated element here you have only two elements so place here 0}px;
How about position:relative? Then you can position it anywhere without it causing problems in nested elements and mobile view.
http://jsfiddle.net/mF7XR/4/
This solution uses no absolute positioning. Tested on Win/Chrome.
Change the .center to
.center {
display: inline-block;
position: relative;
width: 100%;
top: -20px; /* move up */
}
and add this rule
.center li {
float: none;
}
jsfiddle
Update
If your content is not known, then you need JS (or jQuery) to set the offset relative position.
Initially I thought about using a different markup, but your restriction on absolute positioning pretty much kills this idea.
jsfiddle
It would be interesting to know why you cannot use absolute position. Maybe the root of your problem lies there.
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...
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