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!
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 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 */
}
Im trying to position the 3 phone icons to the bottom right. Underneath the bottom right image.
Fiddle Here
Just when I think I have it by using for example margin-left xxpx, etc the images move over but then go vertically aligned. What is best practice for positioning something anywhere you want it?
.imgs {
display:inline;
margin: 0px auto;
margin-left: 1002px;
}
use
.images {
float:right;
}
or
.imgs {
float:right;
display:inline-block;
}
in second case you can give spacing between two images also. margin-left:10px;
.images > div {
display: inline-block;
float:right
}
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...