Each div contains a list of varying lengths and because I'm using inline-block. I think it's causing it to align along the bottom of the div with the most height.
Is there a way I can align these div along the top or will I need to give each div a unique id and style them each accordingly?
I made a fiddle here:
http://jsfiddle.net/Bezzzo/dcqmh2g2/1/
HTML
<!-- footer -->
<div id="footer" >
<!--Community div-->
<div>
<h3>Community</h3>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Tumbler</li>
<li>Google plus</li>
</ul>
</div>
<!--Contact support div-->
<div>
<h3>Contact support</h3>
<ul>
<li>support#supportsupport.com.au</li>
</ul>
</div>
<!--Legal div-->
<div>
<h3>Legal</h3>
<ul>
<li>Terms and conditions</li>
<li>Refund policy</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
CSS
#footer {
position: relative;
width:1033px;
height: 160px;
margin:auto;
border-style:dashed;
}
#footer div {
display:inline-block;
position: relative;
margin-left: 150px;
border-style:dashed;
}
#footer ul {
list-style-type: none;
padding:0px;
margin:0px;
left:0px;
right:0px;
}
Thank you
Just add vertical-align: top; to your #footer div:
#footer div {
border-style: dashed;
display: inline-block;
margin-left: 150px;
position: relative;
vertical-align: top;
}
JsFiddle: http://jsfiddle.net/ghorg12110/dcqmh2g2/3/
As an alternative you can also display: table; — Really useful if you want to make use of vertical align. It may not be best for your current situation but it has it's merits.
#footer {
position: relative;
width:1033px;
height: 160px;
margin:auto;
border-style:dashed;
/* added */
display: table;
/* -- */
}
#footer div {
/* added */
display: table-cell;
vertical-align: top;
/* -- */
position: relative;
border-style:dashed;
}
Working example
Just float left all the div and specify them a width but you need to clear div for this. If you want to use inline block then you don't need to specify width and clear left. In this case you can use vertical-align:top to footer div
JsFiddle : Using float left
JsFiddle : Using inline block
remove display:inline-block from #footer div and use
#footer ul li { display:inline-block;float: left;}
or just
#footer ul li {display:inline-block;}
in your style
Related
So I have user display:table for nav, display:table-row for nav ul, display:table-cell and vertical-align:middle for nav ul li. The menu items still won't align in the middle vertically. Can anyone help?
#main_nav {
display: table;
}
#main_nav ul {
display: table-row;
}
#main_nav ul li {
padding: 10px;
display: table-cell;
vertical-align:middle;
}
<nav id="main_nav">
<ul>
<li>Blog</li>
<li>Videos</li>
<li>Almanac</li>
<li>Snippets</li>
<li>Forums</li>
<li>Shop</li>
<li>Lodge</li>
<li>Jobs</li>
</ul>
</nav>
From your statement The menu items still won't align in the middle vertically.
I presume that you want the table to be in the centre of the page.
The code you have used, vertical-align:middle; is not the same.
Check out vertical-align or this CSS vertical-align Property
Its very neatly explained with working examples.
In order to align in the centre of the page you can run the css as below
.wrapper {
display: table;
text-align: center;
}
.wrapper ul {
display: table-row;
}
.wrapper ul li {
padding: 10px;
display: table-cell;
vertical-align:middle;
}
Here is the JS Fiddle
Or Very simply and easily you could replace the whole code with
<!DOCTYPE html>
<html>
<body>
<table align="center">
<tr><td>Blog</td></tr>
<tr><td>Videos</td></tr>
<tr><td>Almanac</td></tr>
<tr><td>Snippets</td></tr>
<tr><td>Forums</td></tr>
<tr><td>Shop</td></tr>
<tr><td>Lodge</td></tr>
<tr><td>Jobs</td></tr>
</table>
</body>
</html>
I am trying to align the button and links in floated UL list. However it seems they are not getting properly aligned. [Note: we have one link and other is form button].
Following is code and link to codepen:
<div>
<ul>
<li>
<button>Hello</button>
</li>
<li>
Delete
</li>
</ul>
</div>
div{
background:yellow;
overflow:hidden;
}
ul li{
float:right;
list-style:none;
}
a, button{
padding: 4px;
border:1px solid green;
margin-left:5px;
font-size:12px;
text-align:center;
}
The reason your li elements aren't getting aligned properly is because of what's inside them.
You have one button and one a-tag. Buttons are by default displayed as a block-element while a-tags are displayed as an inline-element.
This results in your button and your link having different padding because top/bottom padding doesn't show on inline elements.
You can easily solve this by adding display: block; or display: inline-block; to your css rule.
div{
background:yellow;
overflow:hidden;
}
ul:after{content: '.'; visibility:hidden; height:0; display:block; clear:both;}
ul li{
float:right;
list-style:none;
}
a, button{
padding: 4px;
border:1px solid green;
margin-left:5px;
font-size:12px;
display: inline-block;
}
<div>
<ul>
<li>
<button>Hello</button>
</li>
<li>
Delete
</li>
</ul>
</div>
use display:inline-block instead of float
the issue was because of float:right by using display:inline-block element adjusts to the width of its children and you can align it by adding text-align
div {
background: yellow;
overflow: hidden;
text-align:right;
}
ul li {
display: inline-block;
list-style: none;
}
a,
button {
padding: 4px;
border: 1px solid green;
margin-left: 5px;
font-size: 12px;
}
<div>
<ul>
<li>
<button>Hello</button>
</li>
<li>
Delete
</li>
</ul>
</div>
pls give display:block for a(anchor) tag.if you use padding or margin(etc..) in anchor tag.we need to use display.
How to align lists to top right ? How can i align a list to the top right of the div that contains it ? Will float work ?
Html
<div id="wall">
<ul>
<li>Login</li>
<li>Signup</li>
</ul>
</div>
CSS
#wall{
position:relative;
}
#wall ul li {
list-style:none;
margin-right:50px;
position:absolute;
top:0;
right:0;
}
apply position:relative to the parent div. After apply the following styles for the list.
.list{
position:absolute;
top:0;
right:0;
}
EDIT
Thanks to Manwal for adding the jsfiddle.
DEMO
Change the order of li then use float:right; - DEMO
HTML
<div id="wall">
<ul>
<li>Signup</li>
<li>Login</li>
</ul>
</div>
CSS
#wall{
position:relative;
}
#wall ul li {
list-style:none;
margin-right:50px;
position:relative;
float:right;
}
Yes, using float: right will work.
http://jsfiddle.net/k0r1dj10/1/ or http://jsfiddle.net/k0r1dj10/6/ with more than one drop down.
Additionally what might be better is to set the outer div to position: relative as well as the inner div to position: absolute and top: 0 as well as right: 0.
http://jsfiddle.net/k0r1dj10/3/
To use more than one div in the relative way, you have to use another parent div. This requires you know the width, tho. http://jsfiddle.net/k0r1dj10/5/
Try this:
DEMO
CSS:
#wall{
position:absolute;
top:0;
right:0;
}
HTML:
<div id="wall">
<ul>
<li>Login</li>
<li>Signup</li>
</ul>
</div>
.left_box1 {
width: 50px;
height: 50px;
padding-top: 10px;
text-align: right;
}
This is what my page currently looks like: Here
I want the social icons to position in line with the rest of the navigation content. At the moment they are beneath the content. I thought float right would fix things. Is it because of my browser size? How can I fix this then? Here is my code:
HTML:
<div id="Nav">
<div id="NavContent">
<ul>
<li id="Title">PavSidhu.com</li>
<li>Home</li>
<li>Web Design</li>
<li>Graphic Design</li>
<li>How it Works</li>
<li>Pay</li>
<li>Contact</li>
</ul>
<img src="Images/Twitter.png" class="Social"/>
<img src="Images/Pinterest.png" class="Social"/>
</div>
</div>
CSS:
#Nav {
position:fixed;
width:100%;
background-color:#f26522;
}
#NavContent {
margin:0 auto;
width:90%;
}
ul {
margin:0;
padding:0;
}
li {
font-family: Bebas;
color:#FFF;
list-style-type:none;
margin:0;
padding:0 1%;
display:inline;
vertical-align:middle;
font-size:20px;
}
#Title {
font-size: 35px;
}
.Social {
height:35px;
float:right;
}
Thanks guys :)
The <ul> is a block element, so it wants to be 100% width by default. If you make it an inline element with display: inline; instead, there will be space for the icons to sit next to the rest of the nav bar.
ul {
margin:0;
padding:0;
display: inline;
}
You mean you want the social-media-icons higher? Next to the menu-items instead?
Try using
display: inline-block;
for your ul.
set ul to display: inline-block
As explained earlier, ul is a block element that will take 100% of the width of the parent element, so the floated elements will start on the next line.
To fix this, you can use:
ul {
margin:0;
padding:0;
border: 1px solid blue; /*for demo only */
display: inline-block;
width: inherit;
}
See demo at: http://jsfiddle.net/audetwebdesign/tAjW8/
You need to set width: inherit or else the computed width will be narrower than you might expect.
I have a #main div which contains two divs(#left and #right).I have another div #below_main which is after #main .
Problem: When the height is not set for the #main then those content mess the #below_main. I don't want to have static height for the #main because this is more like content posting height will change dynamically according to content amount.
So i tried min-height for #main but doesn't work i also tried position to relative for #main that too doesn't work.
Now how to set this as no matter the #main #left content is, but the #main_below should start after the content(#main) div.
I believe the float in left what making differences. If that so please explain me. Any help?
CODE
HTML
<div id="main">
<div id="left">
<!-- Dynamic contents -->
</div>
<div id="right">
</div>
</div>
<div id="below_main">
<ul class="st">
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>
<ul class="st">
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>
<ul class="st">
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>
<ul class="st">
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>
</div>
CSS
#main {
background: #ffffff;
width:980px;
margin-top:20px;
}
#main #left {
width:610px;
float: left;
padding:0 0 0 40px;
}
#main #right {
width:280px;
float:right;
padding:0 25px 0 0;
}
#below_main {
height:225px;
width:980px;
border:1px solid #dddddd;
margin-top:20px;
border-radius: 10px;
background:rgb(0,100,0);
}
#below_main ul.st {
list-style: none;
margin: 50px 0 0 0;
padding: 0 0 0 55px;
float:left;
width:140px;
font-size: 11px;
}
JSFIDDLE
EDITS AFTER POSTING THIS QUESTION
Thanks all, clear:both helps but the background color is not filling upto the content.Do you have any idea? i believe this is due to no height specified.how to do it without height?
Check This fiddle
Add clear: both; style to below_main.
EDIT: To fill the #main div with your specified background color, by not setting an explicit height to the #main element itself, you could apply that bgcolor to the #left and #right divs instead.
#main > div { background-color: mycolor; }
EDIT 2: #sun managed to find a better solution wich i will include here:
Add '<div class="clear"></div> before the closing of #main with style .clear{ clear:both}. This helps in both background color issue and content.
To address your update, you just need to use a clearfix on your main div.
See the updated fiddle here.
I personally use the one by Nicholas Gallagher which is this
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}