Make div go all the way across a page

Forum Moderators: not2easy

Message Too Old, No Replies

Make div go all the way across a page

andrewsmd

6:40 pm on Aug 19, 2008 (gmt 0)

I have a div that I put some output into. Sometimes the output goes wider than the page and you have to scroll over. I don't want to change the output because it is important to stay that way. How do I make the div go all the way with the text. Right now it only goes as wide as my page and then it stops and my background color comes back. Thanks

sgietz

6:58 pm on Aug 19, 2008 (gmt 0)

The div should stretch with the content. Please post some code.

Demaestro

7:08 pm on Aug 19, 2008 (gmt 0)

I would say remove any width definition for that div off hand. but you should post the CSS and the div code so we can see first hand

andrewsmd

7:16 pm on Aug 19, 2008 (gmt 0)

I wanted to avoid this so I'll try to explain. Here is an example div. I have a few different ones with the only thing being different in them is the bg color and text color.
#output{
background-color: #F0F0EC;
border: #006595 groove 3px;
padding-bottom: 1em;
color: #006595;
}
now these output divs get changed by PHP because I output text files within them (hence the reason they go over the monitor width). I don't know if you need this but here is the logic of my php.
function ($arrayOfFileNames){

echo("<div id = output>");
foreach($arrayOfFileNames as $value){

echo("<p>$value</p>");

}
echo("</div>");

}

csuguy

1:09 am on Aug 20, 2008 (gmt 0)

What are these divs contained in? Most likely what's happening is their container div/table/etc is limiting them horizontally. You may need to use position:absolute for these divs and position:relative for their containers.

andrewsmd

12:10 pm on Aug 20, 2008 (gmt 0)

If you understand php I can post my entire code. I do appreciate all of the help. They are not in a table or anything. It could be something to do with the fact that I am outputting them with PHP too.

csuguy

1:23 pm on Aug 20, 2008 (gmt 0)

I can understand PHP - go ahead!

Fotiman

1:47 pm on Aug 20, 2008 (gmt 0)

You are better off posting the output of your PHP instead of the PHP itself. Your question is about CSS, which is applied to the output that your PHP creates. In other words, in your browser do View > Source to get that output.

Fotiman

1:48 pm on Aug 20, 2008 (gmt 0)

@andrewsmd
Do you have a width set on your html and/or body elements? As in:

html, body { 
  width: 100%; 
}

andrewsmd

4:12 pm on Aug 20, 2008 (gmt 0)

The width 100% still only goes to the end of the monitor. I have simplified my html output for you. Basically it goes like this
<div id = 'output2'>
<p class = 'text'>A really long string goes here with some returns outputted by php
</p>
</div>
<div id = 'output3'>A really long string goes here with some returns outputted by php
</p>
</div>
Now I have some <br /> tags before it. That couldn't have anything to do with it could it. It gave me some problems in the new IE. They are not in any table or form or other div. Just within my <html> and <body> tags. Here is the css of all the divs I use on this page.
#output2{
background-color: white;
border: #ccccc9 groove 3px;
padding-bottom: 1em;
color: #006595;
}
#output3{
background-color: #006595;
border: #ccccc9 groove 3px;
padding-bottom: 1em;
color: white;
width: auto;
}

#right{
align: right;
padding-right: 1em;
position: relative;
float: right;
font: 20px bold;
text-decoration: none;
}
#bottom{
float: right;
position: relative;
top: 1em;
bottom: 2em;
right: 1em;
font: 20px bold;
}
a.info {
position: relative;
z-index: 24;
color: #006595;
margin-left: 1em;
text-decoration: none;
font-family: cursive;

}

a.info:hover {
z-index: 25;
background-color: #006595;
text-decoration: none;
color: white;
font-family: cursive;
}

a.info span {
display: none
}
.spanClass{
padding-left: .5em;
padding-top: .5em;
font: 17px bold cursive;
padding-bottom: .5em;
padding-right: .5em;
text-decoration: none;
font-family: cursive;
}

a.info:hover span { /*the span will display just on :hover state*/
display: block;
position: absolute;
top: 2em;
right: 2em;
width: 30em;
border: 3px groove #006595;
background-color: #F0F0EC;
color: #006595;
font-family: cursive;
text-decoration: none;

}

a.ex{
position: relative;
z-index: 24;
color: #006595;
margin-left: 1em;
text-decoration: none;

}

a.ex:hover {
z-index: 25;
background-color: #006595;
text-decoration: none;
color: white;
}

a.ex span {
display: none
}
.exClass{
padding-left: .5em;
padding-top: .5em;
font: 17px bold cursive;
padding-bottom: .5em;
padding-right: .5em;
text-decoration: none;
}

a.ex:hover span { /*the span will display just on :hover state*/
display: block;
position: absolute;
top: 2em;
left: 2em;
width: 50em;
border: 3px groove #006595;
background-color: #F0F0EC;
color: #006595;
font-family: cursive;
text-decoration: none;

}
and here is my body css tag
html, body{

color:#006595;
font-family: cursive;
background-image: url("fcBG.gif");
width: 100%
}
I have some text tags but they only contain font, text-align, and padding properties. Any suggestions? Thanks,

Fotiman

5:48 pm on Aug 20, 2008 (gmt 0)

Try removing the width:100%. I believe that is the cause of your problem.

andrewsmd

6:08 pm on Aug 20, 2008 (gmt 0)

Oh I didn't have that to begin with I tried that because of one of the suggestions. Another quick FYI. In IE the div looks fine, but the problem happens when I view it in firefox or safari (newest versions)

csuguy

7:34 pm on Aug 20, 2008 (gmt 0)

Probably not the issue, but your forgot a <p> :D


<div id = 'output2'>
<p class = 'text'>A really long string goes here with some returns outputted by php
</p>
</div>
<div id = 'output3'>[B]<p>[/B]A really long string goes here with some returns outputted by php
</p>
</div>

Anyways - you may want to make the outer divs position:absolute and take them out of the flow of the document. Of course, it will probably still naturally end at the end of the end of the browser screen - so you may want to specify a width which will roughly work for all of your output. Try it just as position:absolute first though.

andrewsmd

8:31 pm on Aug 20, 2008 (gmt 0)

I just forgot the <p> here because I typed that. I can't paste my code because of security reasons.

csuguy

8:41 pm on Aug 20, 2008 (gmt 0)

I thought so. Well - try to use position:absolute and tell me if that works.

Edit: Also - don't specify a width for the divs you put position:absolute for.

andrewsmd

4:39 pm on Aug 21, 2008 (gmt 0)

I tried the position absolute and when I outputted one div it worked great. More than that it it went crazy stacking them all over each other and in weird places. It still works fine in IE which is what everyone in our intranet uses (besides me) so I'll just deal with it. Thanks for all of your help.