|
| |
|
|
cyberdread
Posts: 13
Joined: 10/26/2005
Status: offline
 |
inline breaks on browser resize - 10/29/2005 9:57:19
When I resize the browser width my divs break out of inline and go into block, here is the code:
(css)
body {
margin:3px;
color: #000000;
background: #ffffff;
font-size: 100%;
}
#header {
position:relative;
display:block;
margin-top:5px;
margin-left:5px;
}
#menubg {
position:relative;
display:inline;
margin-left:5px;
}
#mainbg {
position:relative;
display:inline;
margin-left:8px;
}
here is the link so you can see for yourself:
http://xerasect.90megs.com/
I want to keep the divs inline so the one on the right does not shift below it on browser resize.
|
|
|
|
cyberdread
Posts: 13
Joined: 10/26/2005
Status: offline
|
RE: inline breaks on browser resize - 10/29/2005 12:39:46
When you resize the browser I want them to stay beside eachother, I want them to not move at all and stay as if they were position:absolute; except I want to use relative positioning.
| |
|
|
|
cyberdread
Posts: 13
Joined: 10/26/2005
Status: offline
|
RE: inline breaks on browser resize - 10/29/2005 12:44:02
so when you shrink the browser width it would cut off the edge of the image inside the div and a scroll bar would appear at the bottom. In fact, the scroll bar would already be there since the header image is the same width as the 2 images below combined.
I havnt experimented with overflow yet, maybe it will solve my problems.
| |
|
|
|
cyberdread
Posts: 13
Joined: 10/26/2005
Status: offline
|
RE: inline breaks on browser resize - 10/29/2005 13:46:50
I tried overflow scroll and overflow auto but they seem to have no effect at all.
body {
margin:3px;
color: #000000;
background: #ffffff;
font-size: 100%;
overflow: auto;
}
#header {
position:relative;
display:block;
margin-top:5px;
margin-left:5px;
width:672px;
height:78px;
overflow: auto;
}
#menubg {
position:relative;
display:inline;
margin-left:5px;
width:98;
height:522;
overflow: auto;
}
#mainbg {
position:relative;
display:inline;
margin-left:8px;
width:566;
height:522;
overflow: auto;
}
| |
|
|
|
cyberdread
Posts: 13
Joined: 10/26/2005
Status: offline
|
RE: inline breaks on browser resize - 10/29/2005 15:18:53
I finally did it by using floats:
body {
margin:3px;
color: #000000;
background: #ffffff;
font-size: 100%;
width:672;
}
#header {
position:relative;
display:block;
margin-top:5px;
margin-left:5px;
width:672px;
height:78px;
}
#menubg {
position:relative;
display:inline;
margin-left:5px;
width:98px;
height:522px;
float:left;
clear:both;
}
#mainbg {
position:relative;
display:inline;
margin-left:8px;
width:566px;
height:522px;
float:left;
clear:right;
}
Out of interest is there not a way to do it without using floats or absolute positioning?
| |
|
|
|
cyberdread
Posts: 13
Joined: 10/26/2005
Status: offline
|
RE: inline breaks on browser resize - 10/29/2005 15:27:39
uh oh, it turns out it only works in IE, mozilla and netscape still break the flow on resize.....
| |
|
|
|
cyberdread
Posts: 13
Joined: 10/26/2005
Status: offline
|
RE: inline breaks on browser resize - 10/29/2005 16:32:22
I also tried putting #menubg and #mainbg inside a containing div and specifying the containing divs width and height as it should to contain the images within but that dosnt work either......
***the html***
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="v3.css" type="text/css" />
<title>xera formation</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<div id="header"><img src="multif/v1.jpg" width="672" height="78" /></div>
<div id="unify"><div id="menubg"><img src="multif/v2h1.jpg" width="98" height="522" /></div><div id="mainbg"><img src="multif/v2h2l2.jpg" width="566" height="522" /></div></div>
</body>
</html>
***the css***
body {
margin:3px;
color: #000000;
background: #ffffff;
font-size: 100%;
width:672;
}
#header {
position:relative;
display:block;
margin-top:5px;
margin-left:5px;
width:672px;
height:78px;
}
#unify {
position:relative;
width:672px;
height:522px;
display:inline;
overflow:scroll;
}
#menubg {
position:relative;
display:inline;
margin-left:5px;
width:98px;
height:522px;
float:left;
clear:left;
}
#mainbg {
position:relative;
display:inline;
margin-left:8px;
width:566px;
height:522px;
float:left;
clear:right;
}
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
