Been struggling with this for at least a couple hours now. Tried searching around but no solution seems to be working. So anyways, I have a template that I'm working on, and the issue that I'm having is that the sidebar on the left just will not stretch all the way down! If the window is maximized, it looks totally fine. Once you resize the window though it breaks, leaving a large gap between the sidebar and the footer. It also breaks if the content goes down the page any more than it currently does...
See for yourself here: http://bakedcraft.ca/laboratory/testsites/crock/template.html
and the css: http://bakedcraft.ca/laboratory/testsites/crock/css/default.css
Any ideas?
Add position:relative to your .main class
right now your side bar is 100% height of the window, not the main container. by adding position:relative to the sidebar's parent, when the sidebar is 100% height, it becomes 100% of the main div.
Sorry, this isn't really an answer but it's not letting me write a comment...
I looked at your code in firebug (firefox + web developer add-on) and it's showing a box constraint of 467px height I tried to quickly find where this 467px are coming from but can't see it with quick look (it's 4 AM). It's inheriting that height from somewhere, most likely from a combination of other size constraints of related elements. With all the positioning you have going on, in may be hard to locate.
One suggestion I have is if you plan on making a fluid layout you should work with em's rather than straight pixels. As I said, this isn't an answer but I did notice the size constraint of your sidebar. If this problem is still open in the morning I'll see if I can get a better look at it for you.
Alright I was running your problem through my head and I think I figured it out. Forgive me cuz I'm typing this on my phone and can't use firebug to verify if I'm right or not but the constraint I noticed earlier of 467px is n't inherited from another container it's being constained by the text in the sidebar div. If u were to add more text the box will grow with it. I believe what u may want to do is make a child conatiner within the side bar div. Your main sidebar div will only house your grey background color grey. Create a child div within the sidebar div and put your text and images into those. Make sure on the parent div you make it's height 100%. The height of the elements inside the child div shouldn't need height specifications since they will be inherited from the parent sidebar div. Hope this makes sense.
You can do the fix mentioned earlier with using jquery but remember if someone shuts of their JavaScript then your issue remains and your page will break. You should try to find and fix the root cause not use a bandaid that can be taken off.
Related
I've got this weird problem which it seems that i simply can't solve (so far). The weird thing is that I've done almost exactly the same layout before for a navigation-bar, which was succesful.
In my navigation bar i have a button (not an actual <button> but a <div> which acts like one through jquery) to the farthest right of it, which has a background color and expands on click. The problem is that in IE and some resolutions of Chrome as well, there's a little white stripe shown beneath this div. Further this makes the child div that expands beneath it have a little gap between the button in the navigation bar and it self. This might not matter to some people (or most), but it's driving me mad - especially considering that i've done it before and used almost the very same css.
The <div> (to be more precise, it's the "quick-download" div) is set to a height of 70px and line-height of 70px, and the same goes for its siblings (and some of them less). However, the parent div shows up as 70.4px in height, which is bugging me out. I've tried numerous "trial-and-error" solutions/attempts, but with no success at all.
EDIT:
An image of the problem can be seen here (i changed background to red to make it more apparent): http://imgur.com/fya0duQ
EDIT 2:
The white space beneath the quick-download div appears only to be showing in IE and Safari on my compute right now.
EDIT 3:
Link to website is removed as the problem is corrected and therefore no longer is useful.
Assuming you mean the "Quick Download" button...
The height of the navigation bar is 75px and the height of the button is 70px, creating a 5px-tall gap.
The reason your navigation bar is 75px is because your image on the left is 60px tall with margin-top: 15px;. If you want the button to be flush with the bottom of the navigation bar, you can either increase the height of the button, reduce the margin-top of the <img id="aktie-skat-logo" ...>, or reduce the image's height.
The CSS in question:
#aktie-skat-logo {
margin-top: 15px;
display: block;
}
I've actually tracked the problem down my self - however, only after checking the problem across different browsers, after posting in here. The hint came in my old version of safari and IE, and didn't show in Chrome - which is consistent with "EDIT 2" in the original post. I found that some links we're 0.4px higher than others, but only 2/5 links.
The problem apparently stems from inserting a FontAwesome icon using the css ::after selector to links that has "children" (subpages). After removing this or making these icons position:absolute the problem is solved.
As to why insering these using ::after I have no idea. The ::after element had display:inline so shouldn't have broken too much in my opinion.
I'm sorry that I might have wasted your time checking my problem and answering, but even though I found the solution my self, it was a help posting in here (wouldn't have found it otherwise). I hope this might help some other people at some point.
the chat div is breaking the bottom of the border line when im not hovering over it. cant seem to find a solution so any help or advice? thank you.
CODE: http:/jsfiddle.net/7wf912Lt/
As extended comments should be avoided on Stackoverflow - in case the Fidddle already looks like the required layout, just the necessary steps in case it's not so clear how it's done:
The top link is just a <div> on top of the embedded swf. The swf is wrapped in a <div> with float:left; the left and right link are also wrapped in a <div> with float: left. Therefore all divs are positioned in one row. To clear the float, I've just added a <div> with clear:left;. In addition, the width and height of the container have to be increased a bit so everything fits. Last step will be to reduce the margin: left of the container, so the content will be displayed centered. There are different solutions to display content centered, but I guess you'll have no problem to fix the rest.
For the Fiddle I just increased the height of .chat to 550px, the extra 50px are needed to have the additional height for the top link. Otherwise the swf would be displayed breaking the bottom border / partly outside of the box.
Update: Question was changed from displaying links around an embedded swf (which is solved) into the follow-up issue that the swf breaks the bottom border when it's not hovered. Problem is that link provided in question doesn't display the swf chat, therefore the mentioned problem is not solvable. Already added the CodePen-CSS into an updated Fiddle and only changed the height of .chat from 500px into 550px to provide enough space for the added links, and swf doesn't display like described. Further information to be added to the question is from which browser the screenshot was taken as I've only tested with Firefox and there it displays as intended.
Update2: As updated Fiddle by OP displays the described problem, should be fixable by adjusting css. The problem is located in the left link with the position set to 200px; if set to 0 before hover, the chat is displayed in the border when the height is set to 550px instead of 500px.
Update 3: Adjusted Fiddle like follows: changed the left link to position: absolute;, so it's taken out of the flow and won't interfere with the chat window. Otherwise the chat would be pushed down on hover when the left link is displayed on hovering chat as both share the same position for some seconds. Also reduced the margin-left of the chat so it's displayed centered. Fiddle: Fiddle
I guess you won't have any problems to e.g. adjust the padding or margins if you want more or less distance between the links and the border.
In case this works as intended would be kind to follow this step - Stackoverflow , otherwise just add possible issues to your question.
I have been working on a small project for myself to try and experiment with HTML5 and CSS3, to get the hang of it. I need help solving a weird - in my eyes - and unexpected CSS quirk.
I have put my work on CodePen.io to see: http://codepen.io/jbehrens94/pen/uKgvH
The thing is, I want all <section>'s to be 100% in height, so every section fills the exact 100% width and height of the browser's screen. The thing is, if you scroll down to the bottom, there is a lot of white and I can't find out why.
I have noticed margins not working well, so I worked around them, mostly by using paddings.
I tried changing display's, floats and so on, but I just can not seem to find what the problem is and why there is a lot of white on the bottom.
It should not be there, as there are no elements after the last section.
You have three <div />s with classes file, sites, and contact on your last page which start about halfway down but have a CSS declaration forcing them to be 100% height.
To preface this question, I am very VERY new to html/CSS so go easy on me please :)
I am currently designing a web-page that has a fixed position header at the top. The header contains a logo, some drop-down menus, and a right floated container showing the name of the person currently logged in.
The problem that happens is if I re-size the screen to be smaller, the elements of the header wrap onto the next line.
The gray background is a parent div (holding the logo, the drop down menus, and the logged in info) with a width of 100%, a fixed height and fixed position. I initially had the logo and the list of menus set to float:left to keep them in-line, but have been playing around with display:inline-block to see if that can help anything (sadly, it hasn't much). The container all the way on the right holding "Logged in as Alex " is set to float: right
I have tried giving the header bar a fixed width, as well as setting its overflow to auto - neither option fixed the problem.
In my perfect world, at the point where the content begins to wrap now, I would like the entire page to horizontally scroll instead of pushing the content to the next line. A good example of the functionality I'm looking for is the top bar on Youtube, where the items squish together as you minimize the screen and the page starts to scroll horizontally when they can't be squished any closer.
I've been struggling with this for many hours over the last few days, and happy help or direction would be greatly appreciated. Thanks :)
I tried to post images but I don't have enough reputation. I have images that I could find a way to send of before-after resizing if anyone wants
You can specify
min-width
and/or
min-height
:)
overflow is your friend:
Use overflow:scroll on the container, that should fix it. More on overflow here: http://www.w3schools.com/cssref/pr_pos_overflow.asp
The problem is as follows:
I have a header which has a width of 100% (thus it is from side to side of the screen). My background image, starts soon after the header.
In the body I have a box with contents which is centered. When I resize the window I want that the background is overlapped, thus I want this content box to move to the left when doing so. Until it reaches a limit that the background is completely hidden. It will then reach a point that the box cannot shrink thus having a min-width.
How shall I make the box of content overlap the background without hindering the header?
(BTW I have no idea what the tags are. Because this website is asking me for tags)
Thanks
This layout is called Elastic because the page contents adjust as the window does.
Since you didn't provide the HTML, we can't help you anymore than providing the relevant CSS style to apply to your mysterious "box".
style="width:80%; min-width:500px;"
If you're messing with HTML and CSS, I strongly recommend reading up on the basics. The more you know yourself, the more we can help you.