Site: http://bit.ly/13nL8jV
Demo: http://jsfiddle.net/bBckp/
Brief: I am trying to get the CURRENT PROGRAMS to float under the SIGNATURE PROGRAMS with no luck. All of the columns in the footer have the CSS:
float: left;
width: 29%;
The columns are dynamic so I can't just wrap SIGNATURE and CURRENT in it's own div (I can probably hack it with JS)...CLARRIFICATION - I'm referring to the menus in the FOOTER.
Any thoughts how I can do this with just CSS?
You can tweak the element like so. This does leave a hole where it used to be, but that's what relative positioning does.
.item-130 {
position:relative;
left:-180px;
top:25px
}
Alternately you can set the parent UL to position:relative, and use absolute positioning:
.nav-pills {
position:relative;
}
.item-130 {
position:absolute;
left:0px;
top:25px
}
it may help you
html like this way;
<div class="wrapper">
<div class="SIGNATURE PROGRAMS">
..........
</div>
<div class="CURRENT PROGRAMS">
..........
</div>
</div>
and css
.wrapper{
overflow:hidden;
}
.SIGNATURE PROGRAMS{
float:left;
}
.CURRENT PROGRAMS{
clear:both;
}
EDIT:: if you cant change your html..then you may try this
.moduletable.current-prog {
position: relative;
left: -29%;
margin-top: 100px;
}
Related
I recently set up a sidebar for my user panel, however it appears that it's being pushed down. I've looked at other problem threads and their solutions all give me no luck. Hoping someone can help me out figuring this out
CSS:
<style>
div.menu
{
width:200px;
height:660px;
background-color:#C0C0C0;
left:0px;
top:0px;
}
.menu ul li
{
margin-bottom:20px;
}
body {width: 800px; margin: 20px auto; /* center */ padding: 20px;
border: 1px solid black;}
</style>
HTML:
<body>
<center><h3>User Panel</h3></center>
<div class="menu">
<ul>
<li>Link1</li>
</ul>
</div>
</body>
I will post any and all things you ask for to help figure this out - hope it's detailed and as full as it needs to be to help you figure it out
Entire code:
<style>
div.menu
{
width:200px;
height:660px;
background-color:#C0C0C0;
left:0px;
top:0px;
}
.menu ul li
{
margin-bottom:20px;
}
body {width: 800px; margin: 20px auto; /* center */ padding: 20px;
border: 1px solid black;}
</style>
<body>
<center><h3>User Panel</h3></center>
<div class="menu">
<ul>
<li>Link1</li>
</ul>
</div>
</body>
you could do something like this, and just change the order in the html so 'center' comes after the sidebar:
div.menu {
width:200px;
background-color:#C0C0C0;
float:left;
}
center {
float:left;
display:inline;
width:400px;
text-align:center;
}
Also you could make it a class in a span or div, instead of using the deprecated center tag.
The problem is caused because the title is technically on top of the sidebar. Remove <center> and you will see what I mean. Let's create a solution without using <center> as it is deprecated and should no longer be used.
Here is a solution using display: table:
Have a jsBin Example!
HTML
<div class="menu">
<ul>
<li>Link1</li>
</ul>
</div>
<div class="content">
<h3>User Panel</h3>
</div>
CSS
* {
margin:0;
padding:0
}
body {
width:800px;
margin:20px auto;
/* center */
padding:20px;
border:1px solid #000;
display:table
}
body > div {
display:table-cell
}
div.menu {
width:200px;
height:660px;
background-color:silver;
padding:10px
}
.menu ul li {
margin-bottom:20px;
list-style:none
}
h3 {
text-align:center
}
The title is an h3 element which is a block level element. It automatically takes some margin by default. Remove margin from h3 to solve the issue.
center h3 {
margin: 0;
}
Note: The ul tag also take some margins by default.
It's hard to tell what you want to achieve exactly without knowing your envisioned layout and content.
But you are using left and top properties with your menu style and those won't do anything without specifying position as absolute, fixed or relative.
Try to do this:
div.menu
{
position:absolute;
width:200px;
height:660px;
background-color:#C0C0C0;
left:0px;
top:0px;
}
The sidebar will no longer be pushed down. But it will also be taken out of the layout flow. So in your example the h3 (and all other content on the page) will now extend underneath the sidebar. That might not be what you want.
If you want to build a multi-column layout you should consider to use a CSS framework, such as for example Twitter Bootstrap (http://getbootstrap.com/).
You have the top and left attributes set, but no position. You need to add
position: absolute;
to your menu css to get it to stay positioned at the top. It will overlap the h3 you have there, but you can play around with z-index and margin to fix that.
I hope this helps, please let me know if you need any further explanation.
:)
I've noticed that Chrome (34.0.1847.131 m) and Opera (21.0.1432.67) are creating an small gap between two divs when using the property display:table;. (and not when using display:block, for example)
Here's a fiddle reproducing it. (adjust the width of the panel, it doesn't take place with every width)
To reproduce it:
HTML
<div class="left"></div>
<div class="right"></div>
CSS
.left {
left: 0px;
}
.right {
right:0px;
}
.left, .right {
width: 50%;
position: absolute;
height: 350px;
background:#000;
display:table;
border-spacing:0;
border:0;
margin:0;
padding:0;
}
How can I get rid of this gap? Is this some kind of bug?
Changing table to table-cell seemed to do the trick:
http://jsfiddle.net/3z24S/7/
add 1 px to the placement of the right div:
.right {
right:1px;
}
http://jsfiddle.net/3z24S/12/
I have two potential solutions:
Option 1:
Use css calc(); to set the width of the two divs, like so:
Working Example 1
.left, .right {
width: calc(50% + 0.1px); /* Important bit */
position: absolute;
height: 350px;
background:#000;
display:table;
border-spacing:0;
border:0;
margin:0;
padding:0;
}
Option 2:
Use JavaScript to set the width of the two divs, like so:
Working Example 2
wid = function () {
$('.left, .right').width(Math.ceil($(window).width() / 2)); //Math.ceil() will round the value up
};
$(document).ready(wid);
$(window).resize(wid);
If you can get away with using calc() its probably the better option, using JavaScript seems expensive for something like this.
If it is a matter of vertical-align and known height, you can do without display:table/table-cell; DEMO or you could do without absolute position.
You may use inline-block, vertical-align and pseudo élément.
HTML :
<div class="left">
<div class='content'>
<p>content</p>
</div>
</div>
<div class="right">
<div class='content'>
<p>content</p>
<p>content</p>
</div>
</div>
the div.content will be inline-block or is display:table-cell in your problem.
CSS
.left {
left: 0px;
}
.right {
right:0px;
}
.left, .right {
width: 50%;
position: absolute;
height: 350px;
background:#000;
color:white;
border-spacing:0;
border:0;
margin:0;
padding:0;
}
.left:before,
.right:before ,
.content {
display:inline-block;
vertical-align:middle;
max-width:95%;
}
.left:before,
.right:before {
content:'';
height:100%;
width:0;
}
Even answering here to your question , i still do not understand why position:absolute; and still not sure if elements are suppose to have an known height. It looks more like you are not using the proper or best method to your needs.
The pixel bug is, in my opinion, already answered in comments and obviously a different way for chrome to handle this display value.
I've been trying this for a while and I don't seem to find a solution.
HTML:
<table>
<tr>
<td>
<div>this div has to expand over the td padding</div>
</td>
</tr>
</table>
CSS:
table {
height:100%;
}
td {
height:100%;
background: green;
padding:5px;
}
div {
min-width:100%;
height:100%;
background:yellow;
float:left;
white-space:nowrap;
}
I want the div to expand exactly as much as the td but to also expand over the td padding.
Moving the padding to the div element is not a solution since the div has to be 100% height and at least 100% width, the rest of the div's width is overflow:hidden and appears on hover but I try to keep the example as simple as possible so I didn't include that here.
Edit:
#codehorse I've tried your approach but now it appears that the div expands on the whole body so I guess Era is right, relative positioning might not work on td. I could use another wrapper between the td and div but I would like to avoid that if possible. I'm looking for a standard solution on this.
#Era Works perfect Thank you!
Although this is not the right way to do this but if it works for you then use this CSS for div:
div {
margin: -5px;
padding: 5px;
position: relative;
}
div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
td {
position: relative;
}
If your table structure is not too complex,i'll suggest you use display:table to achieve your purpose.....this way, you'll avoid position attributes, which otherwise conflict with layout sometimes making a big mess of things.
Also, html table is not suggested these days, since you have css tables!!
here is a demo
HTML
<div class="table">
<div class="td">
<div class="inner">this div has to expand over the td padding</div>
</div>
</div>
CSS
.table {
height:100%;
display:table;
}
.td {
height:100%;
background: green;
padding:5px;
display:table-cell;
}
div.inner {
min-width:100%;
margin:-2px; /* change this to suit your need */
background:yellow;
float:left;
white-space:nowrap;
}
ello I'm new to html and css and tried to display a images that are floating right. Now I want to get the images under each other but is doesn't work. Can someone help me?
this my css code for the images:
.imagesLeft{
float: left;
margin: 5px;
}
.imagesRight{
float: right;
margin: 5px;
}
this my html code for the images:
<div class="imagesRight">
<img src="../images/medewerkers.jpg">
</div>
<div class="imagesRight">
<img src="../images/medewerkers1.jpg">
</div>
<div class="imagesRight">
<img src="../images/medewerkers2.jpg">
</div>
Thanks in advance !
If you want them to be stacked under each other you can use:
.imagesRight{
float: right;
margin: 5px;
clear: right;
}
Floating won't get the images stacked. For that, you'll have to use position:absolute, and top/bottom, left/right positioning. You can use z-index to change the stack order.
.imagesRight {
position:absolute;
top:0;
left:0;
}
Here is a fiddle demonstrating it. As per the comment below, placing a containing div with positioning to it may prevent future headaches. I've updated my fiddle to include that.
Cause your question was not real clear to me what you want with stacking I've created a little example with 3 different possibilities have a look at the fiddle.
the last two examples are probably the interesting ones. the styling looks there liks this:
.position-relative {
background-color:orange;
}
.position-relative img {
position:relative;
display:block;
}
.z-index {
background-color:gold;
position:relative;
margin:20px;
padding:20px;
}
.z-index img {
position:absolute;
top:0px;
left:0px;
border:2px solid red;
}
.z-index img.first {
z-index:3;
}
.z-index img.seccond {
z-index:2;
}
.z-index img.last {
z-index:1;
}
Maybe this fiddle can help you:
u don't have to use float this divs, because it's stacked.
fiddle example
I am having some problems with placing two divs one below another.
I tried out some solutions found in Stackoverflow like below.
But Nothing seems to be working.
Code:
#wrapper {
position: absolute;
}
#up {
position: absolute;
float: left;
}
#down {
position: absolute;
float: left;
clear: left;
}
<div id="wrapper">
<div id="up"></div>
<div id="down"></div>
</div>
Here's My Attempt,
Fiddle
Helps would be appreciated.
Remove the CSS. DIV tags are block elements and would naturally flow down the page. You are floating them which would cause them to be displayed side by side.
Especially remove the "float" attributes.
That's how DIV's work by default, just remove your css. See a working example here: jsfiddle
<div id="wrapper">
<div id="up"></div>
<div id="down"></div>
</div>
I'm not sure if you want the outer div to be greater than the height of the page, but that's what this does:
#DivSlider
{
width:100%;
position:absolute;
height:170%;
background-color:green;
}
#DivHome
{
height:26%;
background-color:orange;
border:1px solid black; /* You were missing the 'px' here */
}
#DivSkills
{
height:25%;
background-color:white;
border:1px solid black;
}