Ok Im working on a site that has a sidebar and a main content section. The site is made using DIV's but the problem Im getting is that the sidebar doesnt stretch vertically with the content div. For example the sidebar has a few links while the content div has alot of stuff I want the sidebar to stretch. Thanks
You can use display:table-cell property for this & remove float from them. Write like this:
#sidebar,#content_box{
display:table-cell;
}
Check this http://jsfiddle.net/MQy4Y/2/
It's works till IE8 & above.
Related
This page has a content area where all the posts are held and a side bar. The content and side bar menu are sized properly and fit where they're supposed to in Chrome with the actual posts area taking up the left and the sidebar sitting on the right.
In IE, the images are full-width and I'm not sure of a better way to fix this.
The same issue was occurring where the images were full-width and adding the width:100% attribute to the .htheme_post_image img element seemed to fix the issue. If you view in IE, the two areas are side-by-side. However, if you click on a post.
The side menu is underneath the post and the images/text are full width.
If it helps, I'm in IE 11.0.9600
It seems to be fixed if you remove display: table; from both the .htheme_container class and the .htheme_content class.
This seems to fix your IE issue and has no effect on Chrome, so maybe it's simply not needed. But I did not create this theme, so I have no idea of any side-effects this may cause.
Working on a new design using bootstrap3 and trying to stretch the page so that even if there's not enough content to fill the page, the footer section would stay to the bottom.
The reason why I'm using position absolute, is because there's a link from the billing software that's being added within the content, I don't want to remove the link but position it a bit to the bottom in the footer section, in the center bottom, thus since I can't control where this will appear(do know where appears, just can't control), using position absolute on the specific element helps me here.
Now, that's not issue, just saying why I need to use position absolute and why I made the divs like this:
wrapper
>>wrapper_content
>>wrapper_footer
fiddle: http://jsfiddle.net/raicabogdan/jsk1b7ua/4/
the footer section is properly set to the bottom, however for some reason, the wrapper_content does not go 100% height automatically on load or on window resize. Also if you resize to mobile view, content will go down few table rows.
The content goes under the footer section.
What am I doing wrong here? Left a fiddle of the html page along with some css that I felt were needed above.
Hope there's someone that could get me out of this.
Cheers.
Try this link. I have used this method to get the footer to stay at the bottom of the window.
http://ryanfait.com/sticky-footer/
I'm having trouble getting the footer on my site to work. The footer is broken down into two sections. First section is the mainFooter area and the second is kind of the like copyright area.
I have logos in the copyright area and a logo in the mainFooter. I need to have two of them be aligned at all times. It's really one logo but split into both footers because it's a stupid logo.
This is it:
Because of that line, we have to split the footer in two sections. But the text "Art now" can never be misaligned with the building.
So my solution to this was to using absolute positioning on both elements, set right:0 bottom:0 and adjust their position using margin-top/bottom.
Problem is, this only works when the logo is really far out and not truly aligned with the rest of the content on the page since everything else is mostly centered. That's what I mean:
Personally I don't care too much about the alignment of the logo on the far right, at that point you've reached the end of the page, it doesn't overlap with the content in the footer and still looks pretty nice, but our clients designer (not web) is a stickler for these things.
This is the dev site we're working on
Does anyone have any ideas on how we could handle this? Have the logos in the footer but make sure things are aligned properly and aren't overlapping with the content in the footer?
Put a container div around the footer content (and logo's) that has the following css:
.container{
width: 960px;
margin: auto;
position: relative;
}
Now your absolute positioned elements will be positioned relative towards this container div, and will not move too far to the right, but stay in the bounding box instead.
http://codepen.io/MarcMurray/pen/GBwEt
I'm curently laying out a page for an assignment, and am having bit of a brain fart in regard to positioning the content container beside the side bar and below the header.
I know it should be a simple fix, but when i change the margins it pushes the whole page down.
Can anyone see what I'm doing wrong?
Add float:left to .cardinfo CSS class
This is my first time coding a vertical nav menu on a website, I am not sure how to align the main content div so that its at the top. Any other recommendations welcome.
I cannot seem to get my css formatted correctly here:
CSS
Main View
Remove the float declaration from your #content style.