OK this is fairly complicated to explain so I've put it online here:
http://jsfiddle.net/zSgPr/10/
I need the yellow container to wrap around the lower brown div and red footer div in this set-up, leaving the footer at the bottom of the page, ideally where I can then adjust it by pixel margins. I have tried multiple ways of clearing it with some luck, however I can't figure out how to get the footer to behave or the content to encapsulate properly. Could somebody suggest a means of doing it? Thanks guys.
This is what I am trying to achieve
Answer:
Was overlooking the obvious that I needed another container div. If anyone wants to see it's on-line here: http://jsfiddle.net/zSgPr/21/
Add bottom:0 to .textbox
Plcace the .textbox div outside the container which means when you are giving position:absolute the parent div should have Position:relative so add relative to main div which is .page
LIVE DEMO
SOLUTION
Change .textbox style like this mayble helpful
.textbox{
margin:0px 10px;
background-color:#262626;
width:700px;
position:relative;
z-index:40;
border:2px dashed #381e01;
float:left;
}
DEMO
Related
I am trying to position a footer under #cont, but inside the #container.
I tried making it so that when there is more content in #content, it would keep the footer inside the div, and allow me to scroll the page, but I got lost. Any idea how I should do it?
http://jsfiddle.net/a9jv7/
As you can see, more content will push it down(because it's not inside the other div, but if it's not inside, I can't set the footer to always be on the bottom of the page)
You can change the floating elements to display: inline-block, so you have more control over them and the container will adapt to their height.
#footer {
background-color:#FFA500;
text-align:center;
max-width:960px;
width: 100%;
}
The example: http://jsfiddle.net/frapporti/TPbCG/
EDIT:
In general, I'd really like to advice you against the use of floating elements for layout, as they were pushed beyond they original intended use from the very beginning, and now we have flex who does magic :)
http://html5hub.com/after-float/
http://jsfiddle.net/Cerebrl/ZkQnD/
If I understood what you want to achieve correctly, than this is one way to do it:
http://jsfiddle.net/a9jv7/1/
On #container add:
border-bottom:30px solid transparent; // used to add spacing bottom
margin-bottom:-30px; // used to add spacing bottom
overflow:hidden; // to give the container height, because it has none since the elements inside it are float-ed; (google clear-float).
I have literally tried EVERYTHING to get this to work. I've read all other stackoverflow EVERYTHING.
I'm trying to get a DIV to go all the way to the bottom of the page. As you can see in the jsfiddle (via the side borders) it does not. it seems to stop at a height of 357px which is not the full height. I then find out that my div is 100% of the body because the body is also 357px even though I also specified that it should be 100%. Nothing is working and I'm not sure why. In my previous project I never had that problem. I just specified a min-height and when I added more content pass that min-height the div accompanied it. But this time it just overflows for some reason.
html, body {background-color:#F6EBBA;height:100%;position:relative;}
#main-body{
display:block;
height:100% !important;
margin-left:16%;
margin-right:30%;
border:1px solid #dead68;
border-top:none;
border-bottom:none;
bottom:0}
http://jsfiddle.net/R96Lc/
My website had much more content but I had to delete js, css which was not needed and changed the html to so that you could see what I am talking about.
Thanks in advance.
LIVE DEMO
You can declare min-height here:
html, body { background-color:#F6EBBA;
min-height:100%;
position:relative;
}
Remove the height declaration from the #main-body selector.
#main-body{
display:block;
margin-left:16%;
margin-right:30%;
border:1px solid #dead68;
border-top:none;
border-bottom:none;
}
Working fiddle: http://jsfiddle.net/EfrainReyes/5tS8y/1/
If you change your height to auto or just don't define a height, it automatically contains all text that's inside the div. Here is a working version. I've also tidied up your code (just clicked the TidyUp button), so that it is readable.
I have just played with the fiddle, changing:
height:100% !important;
To
min-height:100% !important;
Seems to fix the issue
New fiddle: http://jsfiddle.net/R96Lc/2/
you are declaring
bottom 0
but the div is not absolute, you could also dont declare any kind of height.
I want to create a layout where I want to display an image to the left and content on the right. The image should stay constant when the content scrolls.
The css I'm using:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
The HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
Alot of time on this site and I have understood that background-attachment:fixed positions the image in the entire viewport and not the element it is applied to.
My question is how do I go about creating that kind of layout?
I do not want to give that image as a background image, as if the window is resized, it might get hidden. I want scrollbars to appear if the window size is less than 900px( my page width) so that the image can be viewed at all times.
That happens with this code, however I would like the image to start at my element instead.
How do I go about doing this??
Thanks in Advance :)
Edited:
I took the advice and added a position:fixed property to #main-image. Using the HTML and CSS as shown above.
Now, I also want to fix the header so that it does not move. Basically, only my content section should scroll.
However, if I add a position:fixed to the header, my #main-image and #content now sit on top of my header.
If I add a margin-top:150px (since my header height is 150px) to the #main-image, it works fine and moves down appropriately.
However if I add a margin-top:150px to the #content, my header moves down by 150px and still sits on top of my #content.
Can someone please explain why this is happening?
Thanks in Advance :)
Take a look at this link:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
You can learn how to position Div's with it.
This will solve your problem:
#main-image {position:fixed;}
EDIT:
I'm not sure of what caused your problem but here is the solution:
#content{
position:relative;
top:150px;
}
My Guess:
I think that happened because when using position:fixed those 2 div's were positioned relative to the the browser window, while the other one was relative to the document itself.
In this link you will see more about positioning and you can test some of these features related to the position property:
http://www.w3schools.com/cssref/pr_class_position.asp
About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:
http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/
Set a min-width on html and body.
Have you tried setting your #page-container to relative and your #main-image container to absolute and setting the position using top, bottom, etc. Then you should also be able to float your #content container to the right.
I have put together an example bit of code as I am trying to get 2 images of different sizes to be aligned at the top such as shown below:
HTML
<div id="test">
<div class="social-media">
<img src="http://www.ok.gov/ltgovernor/images/Facebook-icon.png" width="120"/>
<img src="http://semanticweb.com/files/2012/01/twitter_logo.jpg" width="50" />
</div>
</div>
CSS
test {
width:980px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.social-media {
position:absolute;
background-color:#000;
right:0;
top:0;
vertical-align:top !important;
}
I realise now after reading a few posts online that vertical-align will not work in divs and solutions have been to use absolute positioning instead. The only issue is that I am already using absolute postioning for the images parent div.
Would it be good practice to do absolutes inside a parent div that is also an absolute.
However if i was to put an absolute positiong on the img then all img's would stack ontop of each other unless I was to specify each and every img with a class.
So my next thought was to put a float on img within the div. I just wanted to know if this is good practice or if anyone can tell me a cleaner way of doing this?
Also, if I were to want the images to be centrally aligned, how would this be done as the float method works in the sense of getting the images to align at the top but I am not sure how I could align centrally or maybe at the bottom?
Put overflow:auto on the social-media div then add float:left to your images.
Keep in mind you can also use negative integers like vertical-align: -1px; to go up -1px
For more details see CSS vertical-align Property and try it out here.
I cannot get the background to stretch behind the contentbox. The strange thing is, it works with Internet Explorer, but not with Firefox.
I hope it is enough to give you a link, since I do not know where the problem is in the code, it would not make much sense to post the whole code in here.
http://www.yiip.de/arbeit/testlayout/standard_template.html
You can also add overflow:hidden; to #shadow. That will clear the floats without having to put additional markup in your html.
try adding the following 'clearfix' style to your wrappers
.clearfix:after {
content:"\0020";
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
}
.clearfix {display:block;}
You need to clear your 3 floated divs for the containing div to expand vertically around them. The easiest way to do this is to add
<br clear='both' />
after the third floated div (but within the container div).