Why is it that the content div stretches to include the menu nav in this fiddle? http://jsfiddle.net/kePCS/
If I remove the float property on nav it doesn't. Since the nav width is set to 100% it still seems to be the same size when i inspect it.
I have to have it floated afaik. It's an integral part of this menu that im using http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
But i still don't want the nav to sit on top of content that should be below. Do you know any workaround? I wouldn't mind an explanation as to why this happens either. I thought since they were both 100% width they wouldn't overlap. Obviously i was wrong. Thanks!
Won't let me post without code, but the fiddle will be easier to understand.
#menu {
float:left;
width:100%;
}
#content{
width:100%;
background-color:#5FC0CE;
}
Floating the content will work, but I personally wouldn't. This is because floating tends to be the source of many IE bugs, and has some more subtle implications that might come back to bite you later.
There's not necessarily a right or wrong way to do this; however, I would instead add a "clear:both;" to #content, which will prevent it from bleeding up into the nav.
Related
I'm brand new to coding, and realize there is probably a very simple solution to my problem. I have imported Photoshop slices into Dreamweaver by using absolute positioning for each slice within a DIV #container (which is how I have been instructed by my professor.)
http://s1292.photobucket.com/user/ajp2487/media/Screen%20Shot%202015-04-10%20at%209.04.27%20AM_zpsbaeyzcdf.png.html
I want to create a horizontal navigation via CSS (blue text) over the placeholder slice (light gray text). To do so, I created an DIV ul li for the links.
http://i1292.photobucket.com/albums/b578/ajp2487/ss_zpswqnc75pl.png~original
I realize that you supposedly cannot float an element when absolute positioning is in play. However, when I remove absolute positioning, try relative positiong, etc. from .nav, ul, the ul disappears (probably behind the slices) and shifts my existing slices. When I do use absolute positioning, the float left command is rendered useless. Right now everything is as it should be, except that I need the ul to flow horizontally, not vertically!
There has to be an simple solution to this; I'm ready to tear my hair out and any help would be appreciated. Please answer in as simple terms as possible!
display: inline-block; will also do the job if you cannot use floats. Does it not work if you put the float on the li?
nav li {
display: inline-block;
}
Here is an example:
http://codepen.io/anon/pen/xboPxB
Another few things to note (though I completely understand the requirements of using Dreamweaver and doing things in a bizarre way due to coursework), position: absolute; can be dangerous and layout breaking, as I'm sure you are discovering; though I won't go into this unless you have any questions as you mention it is due to your instructor.
Line-height should really be unitless - think of it as line-height * font size. If your font size is 20px (or 1em) and line-height needs to come out as 40px (or 2em), then line-height is 2.
I hope I've understood and answered your question correctly! Please let me know if you are still stuck :)
I'm a bit afraid of using floats as I didn't yet understand clearing the floats and all the hacks that are on the internet in regard to that activity so I've used display:inline-block to place two divs in inline fashion. Their container has a
width:auto;
max-width:900px;
and each of the divs has
display:inline-block;
width: 450px;
Now no matter what I do the second div always breaks to another line right below the first div.
Here's the code : http://codepen.io/anon/pen/xgtFd
I have already modified the width of the two divs like for example
width:440px;
but it didn't help. Still the second div is slightly 'off place'. That's weird cause I was making a website and using pretty much the same approach for my header like in this project. Please help me determine the problem.
I would be glad for any help.
The widths are too wide.
Bump the nav down to about 446px, and they come back in line.
Why 444px instead of 450px? Two reasons:
Your border is taking 2px.
There is whitespace between the <div> tags in your markup, which is reflected in the rendering. If you would like it to be able to make it 450px, put the closing div tag and the next opening div tag immediately adjacent, like so: </div><div id="nav">
If you want to be able to keep the border, and set the width to 450px, then you should check out box-sizing, and utilize box-sizing: border-box;.
Edit:
To address your vertical alignment issues, you need to apply vertical-align: top; to the div elements (the nav and logo divs).
And, the ul isn't centered because when you apply display:block to it, it fills the full width. So you could either make the contents of the div centered with text-align: center on the ul, or you could make the ul display: inline-block.
I am developing a website which is 100% height and width. There is a panel stuck to the left and the main content area to the right, which is scrollable.
However, in the content area the last div inside is getting cut off. I cannot see why. I have tested this on Firefox and Chrome, both are doing the same.
Here's the link to see it:
removed
As you can see, it is cut off, adding a large margin-bottom (50px +) seems to fix it, but that just looks bad.
PS: Don't worry about the missing images, it's because I've only uploaded this page, not the entire website.
Thanks in advance
Height: 100%; is fairly inconsistent across most browsers. Try to avoid it.
I'm not entirely sure how your layouts usually work, but setting overflow: hidden; on everything in your CSS reset is going to make things wonky from the start.
Take out "overflow: hidden;" and you can see the problem. Your content pane is matching the height of your body, as such, you're losing the height of "topBar" on the bottom of the page. because the Body is hiding the overflow.
Yup -- try overflow:scroll; or overflow:visible; In addition, I'd see if you can make it work without float:right;, 'cos that takes it out of the normal flow of things and can wreak havoc with your box adjustments.
ETA: I think I see the problem; each of your little content divs has floats left and right, which is gonna render margins useless, 'cos as far as the browser is concerned, each box's content is out of the normal flow of the page.
ETA(2): You have overflow:hidden; in your big first rule, where you set default styles for like a hundred different elements. That's your main problem. Change that to overflow:visible; (or whatever you prefer) and set appropriate overflow properties elsewhere and you oughta be good. I was able to mitigate the issue by doing this. There's still tweaking required, but that solves the base problem. I would still get rid of the inline floats, too.
From main-style.css line 5:
overflow:hidden
and main-style.css line 127:
overflow-y:auto
are both causing the page to cut off the bottom. However, when you correct this, it reveals that your wrapper div isn't stretching to 100% of the window height (because the background gradient stops WAY before the page ends), and the content inside your main divs go wonky. These are things that the other posters have discussed being major obstacles in your page formatting correctly.
Please take a look at this JsFiddle here. It is working in Chrome, FF, IE 6-8 and Safari.
Not sure how to fix the 100% height problem yet, but to solve the floated div content problem, make sure you declare a width of 50% on both the left and right-floated content
(also, you can make the right-floated content text-align:right in order to make it REALLY stay to the right of the div).
<div class="centerText messageWrapper">
<div class="messgaeHeader">
<div style="float:left; width:50%">
From: 12345678<br />
</div>
<div style="float:right; width:50%; text-align:right">
Date: 123456789<br />
</div>
</div>
1234567890
</div>
Perhaps someone could chime in with a fix for the 100% height issue this is causing now. I realize this isn't a complete answer, and my solution breaks the page in a different way, but perhaps it will be a jumping off point to you or someone else who may have the solution.
I'm having an issue where a div is not butting up to the very top of the page. I tried to solve this by adding
position:absolute;
top:0px;
which put it at the top like I wanted but it also went to the left of the page. I want it to be centered in the page which works if I use auto left and right margins without position:absolute.
Is there any way to have auto margins AND position it at the very top of the page?
I think you have to set left and right (or maybe only left) to 50%
left:50%;
right:50%;
Not an answer to your question, but this sounds like a hacky solution. Don't use position: absolute to solve spacing issues - it has too many other consequences, some of which we can't even see that become apparent on smaller resolutions and such.
Better use Firebug or a similar tool to find out what is causing the space, and fix the reason. It's annoying, but really worth the time.
If you really need to do this, one solution might be to put the position: absolute on a div that spans across the whole screen (width: 100%) and put the real div in there - presumably with the correct margins. (I can't build a test case right now so I can't guarantee 100% that this will work.)
position: absolute takes elements out of the normal flow calculations, so I'm not sure whether or not you can have auto-margins.
Either way, it's generally a bad idea for something like that. My advice is to look into why it's not butting up against the top of the page with normal positioning instead.
I never get that problem because the first thing I do in all of my stylesheets is reset all margins and padding to zero and then redefine them explicitly.
In your case, this might be enough:
html, body {
margin-top: 0;
padding-top: 0;
}
I can't for the live of me figure out how to get one element in my layout to be placed properly in IE 7. You can see the page here:
http://www.iancreates.com/debbie/contact/
Works fine in Firefox, but if you look in IE 7, you'll see the sidebar is beneath the body content. I've tried everything I could think of (floating both divs, changing width and margin/padding to account for IE box model) but to no avail.
Here's the relevant CSS:
.content-left {
width:670px;
height:auto;
margin:0 30px 0 10px;
padding:0;
float:left;
}
.content-right {
width:240px;
height:auto;
margin:0;
padding:0;
float:left;
}
I appreciate the help!
This is a classic IE problem, combined with a slightly impractical page layout.
You have set your peace-main div to have the width 100%, so there is no room for the right content beside it. In standards compliant browsers however, the div doesn't have any height (as it only contains floating elements), so it's not a problem that the right content ends up below it. In IE7 the div is expanded to contain it's content, i.e. the left content div, so it gets a height, and as the right content goes below it, it ends up below the left content also.
Just remove width: 100%; from the peace-main style.
Posting the CSS code would be helpful. Try using "position".
one thing you could do is set your peace-main to float 'left' and only have a width of 700px (so there is enough room for the sidebar)
then the sidebar should also have it's float set to 'right'
but i would actually suggest you try one of these methods :
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
#Guffa's answer is correct in my estimation. I think that your page may have validation errors also that are causing it to be parsed incorrectly. Looking at your markup, it looks like you had wanted div.content-right and div.content-left to be in the same container div, however they aren't, leading the the problem as #Guffa pointed out.
alt text http://i432.photobucket.com/albums/qq48/shiftypowers/source.png
If they were in the same container however, as I think you intended, then this problem would be solved as well. Try and fix this extra div closing tag, see what that does:
alt text http://i432.photobucket.com/albums/qq48/shiftypowers/validation.jpg