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)
LVL 11
singletonAsked:
Who is Participating?
 
RartemassConnect With a Mentor Service Desk AnalystCommented:
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
 
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
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
RartemassService Desk AnalystCommented:
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
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.