I'll do my best to explain the issue. I created a fiddle with the code. https://jsfiddle.net/caoz7sn2/
I'm trying to place a div on top of a div which I accomplished, but the issue is when you resize the screen, the div with the position:absolute doesn't move relatively with the others which is obvious because it's set absolute.
<!DOCTYPE html>
<html>
<head>
<title>404Vanity</title>
<script src="http://localhost:35729/livereload.js"></script>
</head>
<body>
<div class="header">
<img class="logo" src="images/logo.svg">
<div class="navbar">
<ul>
<li>Work</li>
<li>Vision </li>
<li>Contact </li>
</ul>
</div>
<div class="goldbar"></div>
</div>
<div class="itemList">
<div class="item">
<img src="images/shopashop.png">
<div class="overlay"></div>
<div class="title"><h2>Shopashop</h2></div>
</div>
</div>
<script src="bundle.js"></script>
</body>
</html>
the div class="itemList" is suppose to be placed exactly on top of the goldbar div.
I'm not too sure if this is exactly what your going for. But the reason that the divs aren't lining up right is because the gold bar has that margin: 0 auto. That's telling it to always remain centered on the page.
Then you have your .itemlist, which is being told to be positioned 30% from the left of the page at all times, regardless of browser width.
If your trying to center your itemlist, I would doleft: 0; right: 0; margin: 0 auto; on the absolute elements.
Fiddle: https://jsfiddle.net/caoz7sn2/2/
Related
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...
Why is it that the top half of my website (header-wrapper and menu-wrapper) is responsive, but the bottom (featured-wrapper and footer) isn't?
Recently, I've noticed that this responsive website behaves strangely when the screen is smaller than about 1000px. The header and navigation menu shrink to fit the screen size, but the content wrapper, called #featured-wrapper, and footer don't. The content is cut off, and where they cut off they are replaced with a dark charcoal colored bar that is the same as the footer color. When the website is viewed in a larger browser it centers perfectly.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="header-wrapper">
<div id="header" class="container">
<h1></h1>
<br>
<h2></h2>
</div>
</div>
<div id="menu-wrapper">
<div id="menu">
<ul>
<li>
<!-- content -->
</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="featured-wrapper">
<div class="extra2 container">
<div class="ebox1">
</div>
<div class="title">
<!-- content -->
</div>
</div>
</div>
</div>
<footer>
<div id="copyright" class="container">
<p></p>
</div>
</footer>
</body>
</html>
CSS for #featured-wrapper is:
#featured-wrapper
{
overflow: hidden;
padding: 10em 0em;
background: #FFF;
text-align: center;
}
Your css specifies
.container {
width: 1200px;
...
}
which is used in both the footer and the main content. One possible fix to this is to change it to
.container {
max-width: 1200px;
...
}
so that it will stretch to the width of its parent but will never go larger than 1200px wide.
This occurs because of this css:
overflow: hidden;
This prevents the #featured-wrapper element to show the slide bars:
CSS overflow Property
The overflow property specifies what happens if content overflows an element's box.
hidden The overflow is clipped, and the rest of the content will be invisible
I'm not sure where I am falling short but I cannot figure out why my two divs will not float beside one another.
I created a jsfiddle here: http://jsfiddle.net/Q3XUy/
<body>
<div class="container">
<div class="nav">
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="contentImage">
<img src="RD.png" />
</div>
<div class="content">
<p>
Pinterest Banksy 90's organic salvia....
</p>
</div>
</div>
</body>
Thank you!
The padding-right that you have on one of your divs is making them add up to more than 100% and wrap. You can do it different ways, like putting a smaller div inside the 50% div causing the trouble.
Sometimes when you set a width in percentages, the browser will interpret that as a number greater than 100% and wrap. Also, any added padding will trigger it.
Consider:
.contentImage {
width: 49.5%;
padding: 0;
}
.content { width: 49.5%; }
I have a jquery ui calender that i have placed at left of the page.After calender i have placed second div which is taking full width of the web page.Now i want to add one more div just below the calender but its coming after the second div ..
Here is the link of the image ..
Please see the web page
Here is my HTML..
<div id="datepicker" style="float:left;"></div>
<div id="main" style="float: left; width:83%; margin-left:5px; margin-top:0px;">
<div id="doclist">
<h2>Documents</h2>
<ul id="documents">
<li>Document1</li>
<li>Document2</li>
<li>Document3</li>
<li>Document4</li>
<li>Document5</li>
</ul>
</div>
<div id="wrapper">
<ul id="tabs">
<!-- Tabs go here -->
</ul>
<div id="content">
<!-- Tab content goes here -->
</div>
</div>
</div>
<div id="links" style="float:left; margin-left:0px">
<label name="roomOperation" id="roomOperation" style="font-style:normal; font-size:12px;font-weight:bold;"> Room Operation </label>
<br/><br/>
<li>Check in List</li>
<br/>
<li>Check out List</li>
<br/>
</div>
Why is this happening..
Please help me to remove the margin between calender and my hyperlink menu..
If you use position: absolute; on the #links div, and set the CSS top: ; value to the same height as your calendar, plus whatever you want as a gap between the two, say 5px, and the left: 0px; this should work.
You'll also need to surround all 3 divs with a containing div with CSS position: relative to make the absolute positioned div keep within the boundaries of the area you want it to be in.
I also believe you could use float: right; on the documents div and float: left; on the other two, but I'm not 100% sure on this, it's worth a try though.
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.