I got the white background (.big-content) to be 100% height by using position:absolute, but now it's making my footer float! How can I fix this? wolvesofys.weebly.com
Here's my CSS: http://wolvesofys.weebly.com/files/main_style.css?1374887463
Here's my HTML: view-source:http://wolvesofys.weebly.com/
I think the wrappers are the issues.
<div class="wrapper">
<div id="wrap">
<div class="big-content">
<div class="content">
<div class="container">
<p>Text here</p>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
And the footer stuff:
<footer>
<div id="wrap">
<div id="page_footer">
<ul>
<li></li>
<li>Terms and Conditions</li>
<li>/li>
<li>Contact</li>
<li></li>
<li>Help</li>
<li></li>
</ul>
<div id="copyright">Content © 2013 FeraLupus.com</div>
</div>
</div>
</footer>
By using height: 100%, all does it tell the class .big-content to fully expand itself to the height of the parent element that it is within. This does not take into consideration any margin or padding settings that you have (so it could go outside of the parent element or look obscure).
The way absolute positioning works is that it removes it from the "flow" of the page. Your footer isn't technically floating, you are disrupting the flow of it by making the previous element absolute. Without seeing the actual pages code though, it is difficult to tell you how to fix the problem.
Is not good to use absolute that way, so I delete it.
Instead, I removed the auto height from your .wrapper class. And added the fixed position to your footer (in this case, is an acceptable use of that)
Here the live demo: http://plnkr.co/edit/UYKfJrxbnqYlSiEaitNW?p=preview
You have a problem of width, but thats another issue.
Related
Isn't the first time I want all content inside all sections are in a container with a max-width, but the only solution is duplicate html tags. Something like this:
<body>
<section class="one">
<div class="wrapper">
// content for one
</div>
</section>
<section class="two">
// There is a background here
<div class="wrapper">
// content for two
</div>
</section>
<section class="three">
<div class="wrapper">
// content for three
</div>
</section>
<section class="four">
// There is a background here
<div class="wrapper">
// content for four
</div>
</section>
</body>
Putting a div "wrapper" inside looks like the only solution to control every section with a max-width/centered and keeps the ability to put a full-width backgound in few section.
I don't like this solution, is a div duplicated for every section with same properties. If someday I change my mind and want remove it or I need to do it in every section or I need to remove css to that selector. Its look not semantical for me.
Any solution?
I would create a div like this
<div id="maindiv">
<div id="sitecontainer">
<!-- inner content -->
</div>
</div>
Then you can control max width from one place for all section. IF you don't want max width for a section, remove the site container div from within that section. You change your mind on the width? Change it in one place. You decide to go 100% width, change the width to 100% inside that div. Makes it easy to manage sitewide..
Your css
#sitecontainer { float: left; width: 1000px; margin: 0 auto; }
#maindiv { float: left; width: 100%; }
Then if you add another div,
<div id="secondarydiv">
<div id="sitecontainer">
// content still 1000px centered
</div>
</div>
I need to make a inner div horizontally scrolleable, but using the browser scrollbar and not that particular div's scrollbar.
One option would be making every other div's position as static and overflowing the wrapper div, but since I'm modiyfing a premade template, I would prefer to be able to do this without changing the layout. In that sense, a JavaScript/jQuery plugin would be nice, but totally not a must.
Here is the code:
<title>This is a test</title>
<body>
<header>
This is the header.
</header>
<div id="wrapper">
<div id="left-sidebar">
This is the left sidebar.
</div>
<div id="test">
<div id="content">
This is the main content.
<div id="flex">
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
</div>
</div>
</div>
</div>
<footer>
This is the footer.
</footer>
</body>
Here is the jsFiddle: https://jsfiddle.net/k6e3sv6v/
Thanks bra
I think you cannot focus BROWSER scrollbar into some div it appears if the whole page is wider than 100% width.
But I think it can be done by putting all other elements around that div as fixed position which won't move over the screen even if the scroll was moved left-right...
i have made the following example but it does not work.
<div class="wrapper">
<header></header>
<div class="content">
<div class="sub_content">
<article>
<section id="sub_description">some text<br/></section>
</article>
<div class="sub_right floatright"></div>
<div class="clearfix"></div>
</div>
</div>
<footer></footer>
</div>
http://jsfiddle.net/x2x3s7o5/1/
i dont want article to take fixed height. i want to take the full height of the parent container. but the scroll bar doesnt work.
can anyone suggest me any solution?
http://jsfiddle.net/x2x3s7o5/2/
try to remove overflow: hidden from class .content and add overflow:scroll
change article height to 100px.
check it and mess around with the size u want :-)
I have been trying to figure this out for some time but I cant seem to understand whats happening.
So basically I have a max width on my body tag of 900px. I would like a footer div inside the body to be 100% of the browser window. I have tried the using width:100vw but it behaves unexpectedly and the div starts from the left border of the body (not browser window). So then I positioned the div absolutely to left:0 and right 0. The problem arises when I try to center the content within the div with margin:0 auto. It does not get centered.
The result that Im trying to achieve is to have a footer menu with multiple columns of links that expands to fit the full width of the window.
<body class="minwidth900">
<footer>
<div class="full_browser_width">
<div class="width100% margin0auto">
<ul class="floatleft">
<li>link1</li>
<li>link2</li>
</ul>
<ul class="floatleft">
<li>link1</li>
<li>link2</li>
</ul>
</div>
</div>
</footer>
</body>
I have tried my best to figure this out and searched a lot for an answer on the net. So please be kind if this is an easy fix.
Thanks for your time and any help will be greatly appreciated.
I have a ul which is nested inside many layers of divs. I would like my ul's height to be as big as it can without causing the screen size to be bigger than the window. bellow is a sample markup of my HTML.
<div class='row'>
<div class='col-md-6'>
...
</div>
<div class='col-md-6>
<ul>
...
</ul>
</div>
</div>
Setting the ul height to 100% does not work.
Refer this link u can use top and botton property for this
http://24ways.org/2008/absolute-columns/