Here's my current markup: http://jsfiddle.net/LcMU3/64/.
I am having issues with positioning / aligning elements in the middle column.
First, I want to vertically align the elements in the middle and also horizontally center.
Second, I want to "float" the arrows to the left and right of the "weekLabel".
Ultimately, it would look like this:
I actually did try positioning and aligning the elements in nested 3-column layout, but the main issue I have with this approach is the HTML markup gets difficult to follow with all the nested divs.
Would appreciate any help.
As well as a display:inline-block since a div by default is display:block
.weekLabel{
display:inline-block;
float:left;
}
.leftArrow {
display:inline-block;
float:left;
}
.rightArrow {
display:inline-block;
float:left;
}
http://jsfiddle.net/LcMU3/67/
you have to give these elements a float:left; and assign an text-align:center to the weeklabel to center the text, and some margins to finish it off:
.leftArrow {
float:left
}
.rightArrow {
float:left;
}
.weekLabel{
float:left;
text-align:center;
margin-left:10px;
margin-right:10px;
}
Combo inline-block/vertical-align FTW:
.leftArrow,.rightArrow,.weekLabel {
display:inline-block;
vertical-align:middle;
}
(beware of the #wrapper's width)
Related
I have structure where in the text needs to flow within the div box in the body. but seems like i cant get it to work. Maybe i am doing something wrong with the position: tag?
Here is the fiddle: http://jsfiddle.net/Tf5Z8/
and this is what i was hoping to accomplish: http://oi58.tinypic.com/332njm9.jpg so that as text keeps getting added (less or more), it keeps the bottom intact and resizes the div accordingly. Right now i have the #bodyContainer set to height:300px;
#bodyContainer { width:1024px; height:300px; margin:auto; background-color:#f4f3e7; padding-top:20px; }
but i don't want to do this since there would be many pages with different text amount.
Thanks a million, Cheers.
Change the #bodyContainer height to auto. Like this: JSFiddle
All you have to do is add min-height. So replace height property with min-height. And you are done.
If you don't have any problems using absolute position try this method. Add relative position to #bodyContainer and absolute position to #sidebarLeft, then float:right sidebarRight. Check this fiddle
CSS changes
#bodyContainer {
width:1024px;
min-height:100px;
margin:auto;
background-color:#f4f3e7;
padding-top:20px;
position:relative;
overflow:hidden;
}
#sidebarLeft {
height:100%;
width:360px;
background-color:#FFF;
margin-left:30px;
margin-bottom:20px;
position:absolute;
top:20px;
left:0
}
#sidebarRight {
height:100%;
width:634px;
float:right;
}
I have more than 100 divs on the page and each row has 3 divs. I want to remove left margin from first div and right margin from right div whereas center div should have 15px margin from left and right. Please guide me how can I do that without giving specific classes (no margin) on each div. Here is the example
here is my css code
.prp_box{
margin:15px 15px;
width:100px;
height:100px;
background:#5f03a6;
}
Check this out : http://jsfiddle.net/VHXEp/
Use nth-child(n) CSS3 selector.
You could try using the nth-child css selector.
#container:nth-child(3n+0)
{
margin-left: 0;
}
#container:nth-child(3n+3)
{
margin-right: 0;
}
This code might need a few adjustments, the 3n is how often, so every 3. The number after the + is where to start
Check the JsFiddle
http://jsfiddle.net/kpTdE/
.prp_box{
width:100px;
height:100px;
background:#5f03a6;
float:left;
}
.sec_box
{
width:100px;
height:100px;
background:#5f03a6;
float:left;
margin-left:30px;
}
.sec3_box
{
width:100px;
height:100px;
background:#5f03a6;
margin-left:260px;
}
So here is my code:
#headerMenu_outer #headerMenu_inner
{
background-color:#333333;
}
#headerMenu_outer #headerMenu_inner li
{
padding-left:15px;
padding-right:15px;
text-align:center;
font-size:13px;
font-weight:bold;
display:inline;
color:#00FF33;
background-color:#00CCCC;
cursor:pointer;
}
I want headerMenu_inner to be centered inside of headerMenu_outer. Usually, "margin-left: auto" and "margin-right: auto" works. However, headerMenu_inner is occupying the entire width of headerMenu_outer. Is there anyway to make it not do that? I want it to be as wide as the li's need it to be.
Thank you
#headerMenu_inner is most likely a block-level element and therefore will take up as much horizontal space as it can. Assign a width to that element, and then do your margin trick, e.g. margin: 0 auto to center it.
If you want it to be as wide as the LIs, (off the top of my head) set the LI elements to not wrap, then set the "inner" element to be display: inline-block.
I am trying to vertically align a SPAN element in the middle of a parent element.
This is what I am doing:
I am trying to get both the username and password labels to be vertically aligned (middle) with the input boxes.
This is my HTML code:
<div class="login_field_wrap">
<span>Username</span>
<input type="text" autocomplete="off" spellcheck="off" id="username" name="username">
<div class="clear"></div>
</div>
This is what I have tried:
.clear { clear:both; }
.login_field_wrap span {
float:left; vertical-align:middle; font-size:13px; color:#333; font-weight:bold; }
.login_field_wrap input {
float:right; vertical-align:middle; padding:8px 5px; border:solid 1px #AAA;
margin:0px; width:250px; }
Vertically aligning an image element inside of this wrapping DIV works absolutely fine, well in Chrome anyway, it just won't align with my SPAN!
Any help would be amazing.
Vertical aligning via CSS can be tricky, and while CSS3 brings about a slew of goodies to help with that, CSS3 support is lackluster in the current browser market.
To achieve this effect I set the line-height property of the child element equal to the height of its containing element.
For example, I would use the following CSS:
.login_field_wrap { height:30px; /* or whatever is appropriate for your design */
.login_field_wrap span { height:30px; line-height:30px; }
.login_field_wrap input { height:30px; line-height:30px; }
The only downside of using line-height to vertically align something is if the text overflows onto a second line, in which case your design will essentially break.
Just remove the float property from your span class and set it to display:inline-block and the vertical-align:middle property will work, like so:
.login_field_wrap span {
color: #333333;
display: inline-block;
font-size: 13px;
font-weight: bold;
text-align: left;
vertical-align: middle;
}
Edit: cleaned up your code a bit, here is a demo that should work across browsers.
http://jsfiddle.net/kUe3Y/
I found the easiest way to do this is to set the parent container display property to table and the child display property to table-cell
#parent{
display:table;
}
#child{
display:table-cell;
vertical-align:middle;
}
I was able to get this to vertically align an anchor element inside a div.
I put it into the terms of your question in this jsFiddle.
I have never been able to get vertical-align to work in anything other than <td>s.
A workaround I commonly use would be to define a height for .login_field_wrap, then set the line-height property in your <span> to be equal to .login_field_wrap's height.
I think text-align:center; should work on elements too. If I am not mistaken, that usually works even if not on text.
I have a #wrapper { margin: 0 auto } centered in the middle.
I want to align a div.version inside of that wrapper at the top right corner (of this wrapper). So the .version div should still be inside of the #wrapper.
Which position value do I have to use here?
You can make use of absolute and relative positioning for your divs like this:
#wrapper {
margin: 0 auto;
position:relative;
width:400px;
background:green;
clear:both;
overflow:auto;
height:100px;
}
.version {
position:absolute;
top:0;
right:0;
background:blue;
height:100px;
width:50px;
}
Check out the DEMO
So, to make an element appear inside another element, you should give parent a position set to relative while any child element a position of absolute :)
Check out the nice article written on the subject at css-tricks.com:
Absolute Positioning Inside Relative Positioning