• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 305
  • Last Modified:

Previous Next

How would I set up CSS code for three boxes

|   box1  |          box2          |   box3   |

box 1 is fixed width and will contain a graphic which is left flush (a Previous arrow)
box 2 is elastic (variable) width and is screen width less the amount for box 1 and 3, and the material in box 2 is text and needs to be centered
box 3 is fixed width and will contain a graphic with is right flush (a Next arrow)
0
singleton
Asked:
singleton
  • 5
  • 2
1 Solution
 
themrrobertCommented:
adjust as necessary B-)
<div id="wrapper" style="width: 200px;">
	 
	<div id="div1" style="float: left; width: 100px;">
	 &nbsp;
	</div>

	<div id="div2" style="text-align:center;float: left; width: 100px; ">
	 &nbsp;
	</div>
<div id="div3" style="float: right; width:100px;">&nbsp;</div>
	 
	</div>

Open in new window

0
 
singletonAuthor Commented:
I dont see how div 2 is variable width such that it is screenwidth - 200

how do i put graphic for div1 and 3

also I tried letters in front of each &nbsp; and it did not seem to work, and it affected the code below it. I thought with wrapper it should be self contained
0
 
RartemassAuthor, martial arts coach, IT ConsultantCommented:
To put the graphic in just use the img tag:
http://www.w3schools.com/tags/tag_IMG.asp

To link it to another page use the a tag with the href attribute:
http://www.w3schools.com/tags/att_a_href.asp

So in themrrobert's code
<div id="div1" style="float: left; width: 100px;">
       <a href="http://previous_page.html"><img src="previous.jpg" alt="previous arrow" /></a>
      </div>
...
...
<div id="div3" style="float: right; width:100px;"><a href="http://next_page.html"><img src="next.jpg" alt="next arrow" /></a></div>
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
singletonAuthor Commented:
with 200 I get 200 with 800 I get800
Here is what I used:
<div id="rapper" style="width: 800px;">
<div id="div1" style="float: left; width: 100px;">
<img src="prev96.png">
</div>
<div id="div2" style="text-align:center;float: left; width: 100px; ">
Now is the time for all good men<br>to come to the aid of their country
</div>
<div id="div3" style="float: right; width:100px;">
<img src="next96.png">
</div>
</div>

text is not centered.  graphic is 96 in 100 width box but not left flush, etc
0
 
singletonAuthor Commented:
In other words it is not screen width - the image boxes
0
 
RartemassAuthor, martial arts coach, IT ConsultantCommented:
Your text is centred in the div. Do you want it centred on the page?
If centred on the page then the div wrapper will need to be 100% of the screen size (ie width: 100%; instead of width: 800px;)
You then will need to resize the other three divs to match the full size of the screen.
Assuming the previous and next are meant to be smallish and the text in the middle is stretched across the page you would change their widths to something like 10%, 80%, 10% (previous, text, next).
I'd also remove the break in the text as the browser should wrap it to the size of the div.
So with what you have:

<div id="rapper" style="width: 100%;">
<div id="div1" style="float: left; width: 10%;">
<img src="prev96.png">
</div>
<div id="div2" style="text-align:center;float: left; width: 80%; ">
Now is the time for all good men to come to the aid of their country
</div>
<div id="div3" style="float: right; width:10%;">
<img src="next96.png">
</div>
</div>

You just need to adjust the percentages until you get the appropriate size.
0
 
singletonAuthor Commented:
That almost worked. I will accept it as the solution, but for the PAQ I want to mention I had to add
<div id="clear" style="width: 100%;height: 1px;margin: 0 0 -1px;clear: both;"></div>

before the final </div>
0
 
singletonAuthor Commented:
Thanks very much.

Notice I had to add
<div id="clear" style="width: 100%;height: 1px;margin: 0 0 -1px;clear: both;"></div>

to avoid messing up the subsequent material
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now