Jump to content

How can I center my Div in this situation?


Recommended Posts

Hey! So I have an intersting situation:I am trying to make a div stop moving left past a certain point when the browser is resized. But in the method I am using, I can no longer position the Div to sit exactly where I want! I want it to float: left at 50%, and be offset left by about ~150px. My code looks like this:

div.main_content {padding: 0 195px;margin: 0 auto;}div.inner_content {position: relative;float: left;top: 150px;left: 50%;margin: 0 auto;min-width: 400px;border: 1px solid #000000;background-color: #A0CFEC;text-align: justify;overflow: hidden;}<div class="main_content"><div class="inner_content"><p>veruib eribwe vbeuvip  eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p><p>veruib eribwe vbeuvip  eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p><p>veruib eribwe vbeuvip  eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p><p>veruib eribwe vbeuvip  eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p><p>veruib eribwe vbeuvip  eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p><p>veruib eribwe vbeuvip  eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p><p>veruib eribwe vbeuvip  eurbvpe bvp2398bp2 3ivb wep rbpwbc ;fcwpvf vpw78 b2 wevbc73h fpf8 g fwgfb o47 gwi bo87e</p></div></div> 

Again, my problem is that now the div sits at exactly 50%, as expected, and overflows off the screen. What I need is a way to offest the div a little to the left, similarly to this:

div.main_content {position: absolute;float: left;left: 50%;margin-left: -150px;}

As far as I can tell, the div does not stop at a certain point when the browser is resized if I use this method. Any suggestions? Thank you!!

Link to post
Share on other sites

I still can't gather what you are trying to achieve? wouldn't the amount of overflow off the screen as you put it, depend on screen width, and resolution, and by using position: absolute; that element is taken out of the flow of the document, so knowing where this element area finishes or starts is not distinguishable from any element or browser screen edges, so it will just overlap without any scroll bars appearing when it does so.

Link to post
Share on other sites

Yah!! i got it :D Thank you, Regicide Del Feroz, you were right, I just set a Left: value and adjusted the padding and it worked out exactly how I wanted. And thank you, dsonesuk, for the affectionate "B**** Please!". Haha It slapped me in just the right way. I forgot I had switched to the relative position since. Anyway, Thank you guys again! Always well appreciated! :D

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...