Mudsaf Posted November 2, 2013 Share Posted November 2, 2013 Hello, i'm wondering how to keep the div positions sticky even when adding content to them. <html><head><meta charset="utf-8"/><style>div {border:groove;border-width:thin;}#left-navi {width:200px;height:400px;display:inline-block;text-align:center;padding:2px;}#right-navi {width:150px;display:inline-block;height:400px;padding:2px;text-align:center;}#mid-navi {display:inline-block;width:800px;height:400px;padding:2px;}#content {margin-left:150px;width:1178px;padding:15px;}h2 {margin:5px 2px 10px 2px;}</style></head><body><div id="content"><h2>MyWebsite</h2><div id="left-navi"></div><div id="mid-navi"></div><div id="right-navi"></div></div></body></html> Link to comment Share on other sites More sharing options...
davej Posted November 3, 2013 Share Posted November 3, 2013 (edited) Oh my! That is interesting. Why does an inline-block do that? If you get rid of the inline-block the problem goes away... <!DOCTYPE html><html><head><meta charset="utf-8"/><title>get rid of inline-block</title><style>div {border:groove;border-width:1px;}#left-navi {width:200px;height:400px;display:block;float:left;margin-right:4px;text-align:center;padding:2px;}#right-navi {width:150px;display:block;float:left;height:400px;padding:2px;text-align:center;}#mid-navi {display:block;float:left;margin-right:4px;width:600px;height:400px;padding:2px;}#content {margin-left:150px; /* 150px left margin ??? */width:1000px;padding:15px;overflow:hidden;clear:both;}h2 {margin:5px 2px 10px 2px;}</style></head><body><div id="content"><h2>MyWebsite</h2><div id="left-navi"><p>This is some content to look at so that the undesirable effect on the div can be examined and evaluated and various pathetic adjustments to the css can be attempted.</p></div><div id="mid-navi"></div><div id="right-navi"></div></div></body></html> Edited November 3, 2013 by davej Link to comment Share on other sites More sharing options...
davej Posted November 3, 2013 Share Posted November 3, 2013 (edited) Oh, with the inline-block div you can just use... vertical-align:top; Your page is too wide for my laptop. Edited November 3, 2013 by davej Link to comment Share on other sites More sharing options...
Mudsaf Posted November 3, 2013 Author Share Posted November 3, 2013 (edited) Alright i think i have to edit margin from left, was just wondering the align change at div. Was it too width because of the margin left? Anyway changed it to margin: 0 auto; Edited November 3, 2013 by Mudsaf Link to comment Share on other sites More sharing options...
dsonesuk Posted November 3, 2013 Share Posted November 3, 2013 (edited) #content, #content > div {border:groove;border-width:thin;overflow:hidden;} Edited November 3, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
Hadien Posted November 3, 2013 Share Posted November 3, 2013 just add vertical-align:top; to your inline-blocks. Remember browsers will look at inline-blocks and think its more-or-less giant text. Let's say, for example, if you wrote some text out and then you wrapped a word in a span tag and gave it's font-size something like 24px, well browsers don't align by the top by default, but by the baseline, simply because it looks natural. take a look at that "24px" and notice that the rest of the text isn't aligned to match the top of it, but aligned so that most letters (appear to) align to their bottoms, while some lower case letters (g,j,p,q, and y) get shifted a little lower. this is called "baseline". When it comes to inline-blocks, however, this is usually not the case so you have to manually set it to top for those elements. Link to comment Share on other sites More sharing options...
davej Posted November 3, 2013 Share Posted November 3, 2013 Any width over 1100px is pushing the edge of what an older laptop can do and may not fit on the screen. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now