Cronthenoob Posted August 16, 2006 Share Posted August 16, 2006 How do i get a div to float in the center of another div?I've searched for it on the forums, but couldnt really find an answer.Right now i've got ThisBut I want it to act like THISI've tried a bunch of stuff. But i'm dumb apparently Link to comment Share on other sites More sharing options...
aspnetguy Posted August 16, 2006 Share Posted August 16, 2006 does the inner div have to be floated?I know you have to play iwth the inner divs margins. I have seen it done before but can't remember how.Why are you floating hte inner div if it is the only element on that line? Link to comment Share on other sites More sharing options...
Cronthenoob Posted August 16, 2006 Author Share Posted August 16, 2006 well i don't have float anywhere, i just meant that I want it to "float" in the center. heres my CSS .outerdiv { width:100%; height:100%; border:5px solid black; padding:3px;}.innerdiv { background-image: url('../images/gradient_bg.gif'); width:800px; height:100%; border:3px solid black; padding:3px;}.container { background-color:green; height:100%; width:600px; border:1px solid black; position:absolute; left:120px;} I've been playing with absolute positioning and I can get the green div where i want it, but the div with the gradient background, i want to "float" in the center of the outerdiv.I'm trying to avoid using <center> Link to comment Share on other sites More sharing options...
aspnetguy Posted August 16, 2006 Share Posted August 16, 2006 by making .container have absolute positioning it becomes a different "layer" so the other divs "fall out".Remove the absolute positioning (position and left attributes) and see if that helps.If it doesn't post both your HTML and CSS and I'll reproduce your situation and fix it for you. Link to comment Share on other sites More sharing options...
Cronthenoob Posted August 16, 2006 Author Share Posted August 16, 2006 I removed the absolute positioning, now everything is sitting on the left side of the screen.it looks like this[[[ ]] ]I would like to have it like this[ [[ ]] ]and when the browser is resized, the area in the middle stays centered in the window while the outer div gets larger or smaller.makes sense?CSS: .outerdiv { width:100%; height:100%; border:5px solid black; padding:3px;}.innerdiv { background-image: url('../images/gradient_bg.gif'); width:800px; height:100%; border:3px solid black; padding:3px;}.container { background-color:green; height:100%; width:600px; border:1px solid black;} HTML: <html> <head> <title>TITLE</title> <link rel="stylesheet" type="text/css" href="css/mainstyle.css" /> </head> <body> <div class="outerdiv"> <div class="innerdiv"> <div class="container"> </div> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
Cronthenoob Posted August 16, 2006 Author Share Posted August 16, 2006 Well im getting closer, but its still not there.The green div does what its supposed to.The gradient div moves slightly, but not much. And it keeps the green div in the exact center of it when it moves.Can't get innerdiv to be exactly centered though. .outerdiv { width:100%; height:100%; border:5px solid black; padding:3px;}.innerdiv { background-image: url('../images/gradient_bg.gif'); width:800px; height:100%; border:3px solid black; padding:3px; position:relative; left:10%; right:10%;}.container { background-color:green; height:100%; width:600px; border:1px solid black; position:absolute; left:100px;} Link to comment Share on other sites More sharing options...
notclive Posted August 17, 2006 Share Posted August 17, 2006 try margin: auto on whatever you want to center, it puts the div in the center, i think Link to comment Share on other sites More sharing options...
elementalgrace Posted August 17, 2006 Share Posted August 17, 2006 try margin: auto on whatever you want to center, it puts the div in the center, i thinkYup, that should work. If it doesn't work in IE, check your doctype is right as apparently it affects this - or apply text-align:center to the div, which works in IE but not FF. Link to comment Share on other sites More sharing options...
Cronthenoob Posted August 17, 2006 Author Share Posted August 17, 2006 margin:auto works when i set the doctype.I'm not able to check it in FF here at work. Not sure if it works or notNow how in the world can i get the height to scale to 100% of the page.When I declare a doctype, height:100% doesnt work anymore. And width:100% makes the outerdiv stretch further than the size of the window. Link to comment Share on other sites More sharing options...
aspnetguy Posted August 17, 2006 Share Posted August 17, 2006 height: 100% continues to be a problem mostly because every browser handles it differently.In this case IE handles, IMO, correctly alllowing it to use all avaible space.In FF, say your browser resolution is 800x600, and you use height:100% (there is a deatiloed method to get ti to work) then FF handles it as though you put 600px (!00% of your resolution is 600px) not just take up the availbel space.Needless to say it is a pain in the neck and I have resorted to using body background images to simulate this style. Link to comment Share on other sites More sharing options...
Cronthenoob Posted August 17, 2006 Author Share Posted August 17, 2006 found a solution. Pretty simple fix.100% height Link to comment Share on other sites More sharing options...
aspnetguy Posted August 17, 2006 Share Posted August 17, 2006 yes but you will have troubles applying this with valid XHTML and that onle applies to the body and one div.Test it this way. Place 2 divs in your body,one on top of the other, each with a colored border so you can see them. Make the top div width:500px;height:250px. then make the bottom one width:500px and height:100%.The bottom one will not, in FF, take up the remaining space of the screen but will be the total height of the screen + 250px of the top div. Link to comment Share on other sites More sharing options...
Cronthenoob Posted August 17, 2006 Author Share Posted August 17, 2006 Ok, I think i've got it the way I want. Looks good in IE.Care to look in FF and see if it works as well?Test page Link to comment Share on other sites More sharing options...
aspnetguy Posted August 17, 2006 Share Posted August 17, 2006 looks good, good job, maybe I have just had a really bad experience with this. perhaps I need to simplfy the diesng first???Although it may change once you add content, but hopefully not. Link to comment Share on other sites More sharing options...
Cronthenoob Posted August 17, 2006 Author Share Posted August 17, 2006 **Crosses fingers** Link to comment Share on other sites More sharing options...
aspnetguy Posted August 17, 2006 Share Posted August 17, 2006 **Crosses fingers** *prays for divine intervention* Link to comment Share on other sites More sharing options...
Cronthenoob Posted August 17, 2006 Author Share Posted August 17, 2006 Before i get any further. . . . Can someone makre sure it looks the same in FF and IE for me?appreciate it.Wish I could use another browser here . . .Test layout! Link to comment Share on other sites More sharing options...
aspnetguy Posted August 17, 2006 Share Posted August 17, 2006 here is hwo it looks in FF Link to comment Share on other sites More sharing options...
Cronthenoob Posted August 17, 2006 Author Share Posted August 17, 2006 The banner image repeats once in the background it looks like.I added background-repeat:no-repeatIf that didnt work, ill just have to work on it at home.Oh, and i really appreciate the help :)I can't say thank you enough. 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