Solved

Div page centering, alignment question

Posted on 2013-11-20
13
299 Views
Last Modified: 2013-11-20
Hi Guys,

I have been stuck on this issue for quite sometime and still cannot figure it out. I do hope someone is willing to help me.

Please see the picture below for question clarity.

I would like to have the 1000px div aligned on the center of the page as seen in diagram 1.
However, at the same time, I would want to have div block 'A' and div block 'B' each aligned at each end of the page browser window.

When the user reduces the size of the browser window, the 1000px div will remain centered on the page, and the 2 other div blocks 'A' and 'B' will remain at each of the ends. (see diagram 2)

When the browser window is 'smaller' than all three, the div block 'A' , the 1000px centered div block and the div block 'B' will all remain in one line but of course portions of the div will only be visible depending on the size of the browser window.(see diagram 3)

How can this be achieved? I have spent countless hours and still cannot make this happen.

Thanks so very very much!

 css question
0
Comment
Question by:CFbubu
  • 5
  • 4
  • 4
13 Comments
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 250 total points
ID: 39664442
Here's a working sample:
<html>
<style>
	body {
		position: relative;
		min-width: 1100px;
		border: solid 2px #0f0;
	}
	.colLeft {
		border: solid 1px #000;
		text-align: center;
		width: 50px;
		position: absolute;
		left:0;
		top:0;
	}
	.colCenter {
		position: absolute;
		left:50px;
		right: 50px;
		top:0;		
	}
	.colRight {
		border: solid 1px #000;
		text-align: center;
		width: 50px;
		position: absolute;
		right:0;
		top:0;
	}
	
	.content {
		width: 1000px;
		text-align: center;
		border: solid 1px #f00;
		margin: 0 auto;
	}
</style>
<body>
	<div class="colLeft">A</div>
	<div class="colCenter">
		<div class="content">
			1000 px
		</div>
	</div>
	<div class="colRight">B</div>
</body>
</html>

Open in new window

0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39664448
Above, A and B have 50px and the center column have 1000px.
If you change these values you also need to rearrange the calculations.

basically colCenter has the same left value as the A width, and right value as B width.

I added the border so we can see what's going on.
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 250 total points
ID: 39664449
This does everything bar center the main content - I will have to think on that one as it is not easily achievable while doing everything else
http://jsfiddle.net/GaryC123/kVB8z/3/

HTML
<div class="container">
    <div class="inner">
    <div class="left">Left block</div>
    <div class="middle">Middle block</div>
    <div class="right">Right block</div>
    </div>
</div>

Open in new window

CSS
.container {
overflow:hidden;
}
div {
    border:1px solid gray
}

.left {
    display:inline-block;;
    width:100px
}
.middle {
    display:inline-block;
    width:200px;
    margin:auto;
}
.right {
    display:inline-block;;
    width:100px
}
@media all and (min-width:430px){
    .right {float:right}
}
@media all and (max-width:430px){
     .right {display:inline-block}
    .inner {overflow:hidden;width:4000px}
}

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39664487
Update version - HTML is the same.  You will need to tweak the widths as I have set them low so I can see them in action
http://jsfiddle.net/GaryC123/kVB8z/5/
.container {
overflow:hidden;
    position:relative;
}
div {
    border:1px solid gray
}

.left {
    position:absolute;
    display:inline-block;;
    width:100px
}
.middle {
    display:block;
    width:200px;
    margin:0 auto;
}
.right {
   position:absolute;
    top:0;
    right:0;
    width:100px
}
@media all and (max-width:420px){
     .right {left:300px}
    .inner {overflow:hidden;width:4000px}
    .middle {margin:0 100px}
}
@media all and (min-width:403px){
    .inner {width:100%;min-width:403px}
}

Open in new window

0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39664533
@GaryC123: just as a warning that your solution doesn't work on older browsers...
IE<9 for sure... the others I don't know by heart :)
0
 

Author Comment

by:CFbubu
ID: 39664542
Thx for the super quick response again everyone!

I am sooo excited to try your solutions out :)

Let me get back to you guys asap once I try it out.

Much much thx!
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 58

Expert Comment

by:Gary
ID: 39664545
If they need to support IE8 and lower (yawn we're on v11 now) then s/he can use
http://code.google.com/p/css3-mediaqueries-js/

There is no other way to do what he wants with pure CSS2
0
 
LVL 58

Expert Comment

by:Gary
ID: 39664551
Actually I lie, your version works great once you add an overflow:hidden to the body.
0
 

Author Comment

by:CFbubu
ID: 39664593
Hi GaryC123,

I am trying out your solution first and I noticed that when I set the middle centered block to a width of 1000px, and try to make the browser window smaller, the middle centered block would overlap the left block, and than as the browser size further shrank, the right block will overlap the center block.....

But if i used your example of setting the center block to a width of just 200px, everything worked fine....

Could you let me know which values I should be adjusting to ensure that when the middle centered block is set to 1000px width, the solution would work?

Thanks so much!

I am so excited I am finally seeing this come true!

I did not try your solution Alex yet as I have many other stlyes that would be affected by using the body tag as in your solution.

Thanks again so very much!
0
 
LVL 58

Expert Comment

by:Gary
ID: 39664600
Just use Alex's example but instead of the BODY add another container DIV around your columns and apply the css to that instead of the body.  But you will also need overflow:hidden on the BODY

If you cannot do anything like that with the body tag then with my example you just need to amend the media queries

@media all and (max-width:1200px){
     .right {left:1100px}
    .inner {overflow:hidden;width:4000px}
    .middle {margin:0 100px}
}
@media all and (min-width:1200px){
    .inner {width:100%;min-width:1200px}
}

Open in new window


Update jsfiddle
http://jsfiddle.net/GaryC123/kVB8z/6/
You will need to tweak the widths to take account of borders etc.
0
 

Author Comment

by:CFbubu
ID: 39664700
Thanks for all your patience guys! I am still working through trying out both your solutions.

In my initial testing, it looked fine in my computer browser, but I am not sure why, when I viewed the page from my andriod device browser, the right hand side box with is supposed to be hugging the right hand side of the browser is showing a gap as though there was a margin right style when there is not...any clues?

Thanks.
0
 

Author Closing Comment

by:CFbubu
ID: 39664787
Thanks guys.....you gave me the correct and clear knowledge of achieving what I think I wanted to do.

I am very appreciative of the time and patience you guys gave to me!

Thank you so much.

Have a good evening! :)
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39665094
Hi guys,
sorry I didn't say anything anymore but it was almost 1:30 AM here and I had to sleep! :)

Just saw this question and I absolutely had to give it a try :)

Cheers!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now