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.
Related
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 */
}
I have ul where li elements are floating left. I want to align those li elements to center of ul.
Goal:
======>>>
My try:
My try always result this
Jsbin:
http://jsbin.com/EGoVAg/19/edit
EDIT:
width of #wrapper is not fixed ! I use 320px just to show you result pictures !
Firstly, remove the float: left; from .widgetPhotoGallery li.photo. display: inline-block (which is already included) is all you need to correctly position the elements:
.widgetPhotoGallery li.photo{
background-color: blue;
padding: 0;
margin: 0;
position: relative;
display: inline-block;
}
Then all you need to do is simply give your ul some padding (36px evens out both sides):
.widgetPhotoGallery .photogallery{
background-color: lime;
list-style: none;
padding:0 36px;
margin: 0 auto;
text-align: left;
}
Working JSBin demo.
On a side note, you don't need any of those !important declarations. The styling is identical without them. If you need to override existing styling you should look into CSS Specificity instead.
Your only option is to set a fixed width and do:
#wrapper {
display: block;
margin: 0 auto; /* center it */
width: XXX;
}
You can use media queries to set the fixed width at certain breakpoints, if you like, or you could use max-width instead of width
http://jsbin.com/EGoVAg/23/edit
You may not like this answer (judging by your large font, bolded comment about #wrapper not being a fixed width), but there is no other way to achieve what you want.
You have to set a fixed width to the ul. So in your example, each li has 118px of width and 2px of margin on each side. To fit two li's in a row set this to .widgetPhotoGallery .photogallery:
width: 244px;
Notice that the background will become smaller, so you can simply put it to .widgetPhotoGallery .widgetContent
.widgetPhotoGallery .widgetContent {
background-color: lime;
}
Here's the update JSbin.
If I have two divs, and in the first div there is some image tag with a width of 100% so it fits the screen like
<div id="first"><img src="" width="100%"></div>
<div id="second">Some Text</div>
How do I make it so #second is positioned under #first? It should work by default, but because the height of #first is not set, #second is being positioned at the same place #first is positioned.
It indeed should work by default.
You either
Made your divs inline-blocks
Set their position to absolute
floating them to the left
Most likely it's the second scenario. Set their position to static.
Floating and/or giving the first an automatic height might do the trick:
#first {
float: left;
overflow: hidden; /* or height: auto perhaps*/
}
#second {
float: left;
}
Edit: too late, problem solved while I typed :)
We really need to see your CSS, but compare your values to these; if they're set to anything else, that may be the problem.
#first {
display: block;
float: none;
position: relative; /* or possibly position: static; */
}
#second {
display: block;
float: none;
position: relative; /* or possibly position: static; */
}
What about the image? Any CSS rules assigned to that? Is there a div around these two divs with a max-height?
Going to be quite difficult to explain this so I've created a JS-Fiddle so you guys can see what I mean...
If you look under the 'products' tab the second link in the list I've made quite long, the result is that it overflows out the boundaries of the list. How can I make this that if a link is very long, that the width of the containing ul stretches to contain the link?
Again having a look at the JSfiddle will make things more clear in what's happening and what needs to be done.
PS - Need to get it to work without editing the HTML at all!
//Ignore this
Just remove the fixed width of your list:
ul li {
display: block;
position: relative;
float: left;
width: 140px; // <-- Remove this
height: 25px;
}
It will make your default width for your list become auto and you're done.
Demo: http://jsfiddle.net/Kpxpf/5/
Just change the width:140px; to min-width:140px; in ul li
Demo :
http://jsfiddle.net/Kpxpf/6/
You're constraining the width of your <li>s from the style on the top-level menu. This will keep your intended width: 140px; on the top-level menu and allow the sub menu to size based on its content.
jsFiddle
ul#menu li ul li {
width:auto;
}
You are setting a fixed width on the nested lists.
Change the ul li styles to:
#menu > li {
display: block;
position: relative;
float: left;
width: 140px;
height: 25px;
}
This will remove the fixed width from the nested uls allowing them to take as much space as needed.
jsFiddle
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