Solved

Div page centering, alignment question

Posted on 2013-11-20
13
301 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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
 
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

U.S. Department of Agriculture and Acronis Access

With the new era of mobile computing, smartphones and tablets, wireless communications and cloud services, the USDA sought to take advantage of a mobilized workforce and the blurring lines between personal and corporate computing resources.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

810 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