|
CSS - Div Placement Within Docuement Flow
Hello,
My page when correct should show the HeaderContainer, blow that the ActionContainer which has, 3 column divs, then below that the FooterContainer. It is important that the page build starts with the CenterContainer, then the LeftContainer, then RightContainer. My issue is that the LeftContainer and RightContainer columns both are aligning to the bottom of each other, and to the bottom of the CenterContainer column. I think this could be an issue with floats. What do you think? See online demo, http://tlcgiftsandbaskets.com/demo/positioning/position_css.php Code:
body{
margin: 0pt; margin:0 15px 0 0;
text-align: center;
}
#Container{
position: absolute;
z-index:1;
width: 700px;
height:auto;
left: 50%;
margin-left: -350px;
border-width: 1px;
border-top-style: solid;
border-left-style: solid;
border-right-style: solid;
border-color: #ccbbaa;
background-color: #ffffff;
text-align:left;
}
#ActionContainer { margin:0 0 0 0; text-align:left; border:1px solid orange; }
#CenterContainer { margin:0 0 0 175px; text-align:left; border:1px solid yellow; width:250px; }
#LeftContainer { margin:0 0 0 10px; text-align: left; width: 150px; border:1px solid green; float:left; }
#RightContainer { margin:0 0 0 450px; text-align: left; width: 150px; border:1px solid blue; float:right; }
#HeaderContainer { margin:0 0 0 0; width: 700px; height: 245px; border:1px solid red; }
#FooterContainer { margin:0 0 20px 0; padding:0 0 30px 0; border:1px solid blue; display:block; }
Code: <div id="Container"> <div id="ActionContainer"> <div id="CenterContainer">CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer.</div> <div id="LeftContainer">LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer.</div> <div id="RightContainer">RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer.</div> </div> <div id="HeaderContainer">HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer.</div> <div id="FooterContainer">FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, </div> </div> Similar TutorialsWhat are some reasons that a div box could come out of the flow of the page. I know when you set an elements position to absolute, it comes out of the flow. Fixed does this as well. Any other reasons, or bugs. I have a couple div boxes which are positioned relatively and floated left and right. They have come out of the flow and now overlap other elements. I have no idea why. View the error he http://textcs.com/wimax/coverage-map/ Code: <div id="page">
<div id="city_bg"><img style="min-height:240px; min-width:800px" src="<?php bloginfo('template_directory'); ?>/images/city_bg_long.png" border="0" alt="" width="100%" height="100%" /></div>
<div id="info">
<!-- page content -->
<div id="info_content">
<?php if (have_posts()) : while (have_posts()) : the_post();
the_content();
endwhile;
endif;
?>
</div>
<!-- navigation -->
<div id="info_nav">
<ul>
<?php wp_list_pages('title_li=&sort_column=menu_order'); ?>
</ul>
</div>
</div>
</div>
CSS: Code: #page {
position:relative;
margin:0;
width:100%;
height:auto;
min-height:500px;
border-bottom-color:#FFFFFF;
border-bottom-width:5px;
border-bottom-style:solid;
background-color:#413163;
}
#city_bg {
position:absolute;
left:0;
top:0;
z-index:1;
overflow:hidden;
width:100%;
height:450px;
}
#info {
position:relative;
width:836px;
padding-top:20px;
margin:0 auto;
z-index:20;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
color:#000000;
}
#info div {
display:inline-block;
}
#info_nav {
position:relative;
float:left;
width:200px;
min-height:200px;
border-color:#FFFFFF;
border-width:4px;
border-style:solid;
background-color:#FFFFFF;
background-image:url(images/blue_fade_small.jpg);
background-repeat:repeat-x;
background-position:bottom;
}
#info_nav ul {
padding-left:5px;
}
#info_nav li {
list-style-type:none;
padding:3px;
margin:0;
}
#info_content {
position:relative;
float:right;
width:600px;
min-height:400px;
border-color:#FFFFFF;
border-width:4px;
border-style:solid;
background-color:#FFFFFF;
color:#110d1a;
padding:10px;
}
Hello Friends I've a problem where my images flow away after i did added an banner has the following css code Code:
#topbar{
position:absolute;
padding: 2px;
background-color: #F4F3B3;
visibility: hidden;
z-index: 100;
}
HTML Code Code: <div id="topbar"> <a href="" onClick="closebar(); return false"><img src="images/close.gif" alt="blah" border="0" /></a> ads goes here </div> now the images on IE below the banner flow away and after i make refresh it back again i've tired to change position:absolute; to fixed/relative ..ect but it will effect the banner since it moves down with the scroll thanks in advance I'm running into a problem with an interface that I'm developing. Basically it's a collapsible treeview using DHTML and the display property to 'open' and 'close' tables. I need to have several of these tables side by side but without overflowing horizontally so that the user has to scroll horizontally. The best way I've found was to float the elements so that any overflowing tables would be wrapped. Example: [] [] [] [] [] [] [] [] [] [] [] [] However, a problem arised when I 'open' and 'closed' the tables repeatedly (three times or more). The other tables started to wrap immediately after the first table (the one I was opening and closing). So that all the tables lined up in a single column eventually and not flowing as they should've been. Example: [] [] [] [] [] Upon refreshing the page, everything flows as it should. Please let me know if I'm unclear in my description. Hi All, I am using DIV tags to hold content rather than using a table. I have about 16 elements with the following style applied: Code:
div.game {
text-align: center;
float: left;
height: 180px;
width: 150px;
overflow: hidden;
}
This works well, the DIVs will fit as many per row as possible but it can leave a lot of empty space to the right of the screen (up to 150px obviously) and if the last row has less DIVs they to the left of the screen like this: |--- page ---| [ ][ ][ ][ ] [ ][ ][ ][ ] [ ] I would like to be able to either center the DIVs or to space them out like this: |--- page ----| [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] ______ [ ] Hope that is clear. I can't set relative widths, as I want the page to scale. So is there any way I can acheive the effect I want? Thanks. Hello, I'm stumped on how to float an image to the left, and still keep it in the flow of the document. Here is an example off my head. Code:
#container {
border: 1px solid #000;
}
img.floatleft {
float:left;
}
div {
display: inline;
}
<div id='container'>
<img src='myimage.jpg' class='floatleft'>
<div>text</div><br>
<div>text</div><br>
<div>
<div id='container'>
<img src='myimage.jpg' class='floatleft'>
<div>text</div><br>
<div>text</div><br>
<div>
The image will exceed the bounds of 'container' if the image is larger than the text is tall. How can I get around this? Thanks again for the help. webg <div>text</div> I've got a 2 column layout. It goes like this: .leftnav { position: absolute; left: 0px; top: 0px; } .content { position: absolute; left: 150px; top: 0px; } In the html: <div class="leftnav">A bunch of navigation</div> <div class="content">A bunch of content</div> Now, underneath both of these columns, spanning the width of both, I want a footer div. The leftnav and the content will not be the same length down the page. I don't know which of these 2 columns will be longer on any given page. However, underneath the longest column, I want to put my footer div. I could do this with a table easily enough. But how fun would that be? Is there a way to make text flow through to a new line if there is too much text to fit in the defined width of a button? 'Ello, This problem is a bit complex to try and explain on here so if this gets too confusing just let me know and I'll try and clear up whatever you are confused about. I am currently building a site that has a wrapper div with a width set to 100% and a max-width of 1000px so that on smaller screens the site will appear nicer and not have horizontal scrollbars. In this wrapper div is a content div that is 84% of the wrappers width and has it's margin set to 0 auto to make in then content div centre in the wrapper. What I'm wondering is if there is a way to change the content divs width from 84% to 100% once the wrapper div get to a small enough size. At the moment when the screen gets too small the content div is still 84% size of the wrapper div and centred, but say on a screen with a resolution of 800x600 I think it would be more beneficial to have to content div take up the whole wrapper to display more content. I was thinking of setting a min-width but then if the screen gets smaller than the min-width a horizontal scroll bar would appear. I was just wondering if something like this was possible, if not it doesn't matter to much as I can set the min-width up for a 800x600 screen resolution and anything below that probably isn't too important anyway. HI, I have an A-Z contents list for my website. I can manually split the list into 3 columns of equal length, but that only works as long as the list doesn't change length and the window is the right size. Is there a way to have a single long list and automatcally show it in 3 newspaper style columns? Thanks Richard Can be all viewed here -> http://streaming.smad.jmu.edu/smad307/ring/gloo I have three layers starting at the same position on the page. Each layer has a Y-repeat repeating image that tiles seamlessly. There is one for the left spacer, the middle content, and the right spacer. The Nav menu on the left are just images placed in at the top of the left spacer layer. I'm trying to get each of these layers to expand as content fills up the middle Content layer. This doesnt work at all in Firefox - with any excess content just heading off into white space. And it works somewhat with IE - with only the Content layer to expand as content fills it. I know this is a recurring issue with CSS, but is there a simple fix for this? I've seen this done before without any Javascript hacks, but can't remember where. I do remember, it didn't look like the most graceful solution. And in IE, the navigation .gifs on the left have a gap between each of them. I found that odd since they're just <IMG>s within the layer. Any help would be greatly appreciated hi i have a table that has another small table of a fixed height aligned to the right. what i want is that when i enter text in the larger table, the text should 'flow' around the corner of the table. +----------+----+ +....1.....+..2.+ +..........+----+ +...............+ +---------------+ when i enter text in 1, i want that it wraps it around 2 as well. please tell me how to do it. Hi there, I'm having a FF/IE problem! As usual. I have a site up (www.silk-works.com)which thanks to BonRouge and Dan_A has a footer that sits in the correct position, ta peeps. The problem I have now is that - www.silk-works.com/jane/jane.html - I have Images floated right and I want text to appear alongside - which FF handles fine, but IE bumps below the first Image.. Code:
<img src="../photographs/jane01.jpg" alt="" id="containerImageRight"/>
<img src="../photographs/jane03.jpg" alt="" id="containerImageRight"/>
<p>some ample text....</p>
[CODE]
CSS for image placement is;
[CODE]#divWrapper #divContainer #containerImageRight {
margin: 0px 10px 10px 10px;
float: right;
border: 2px solid #6E6447;
padding: 0px;
}
CSS for <p> tag is; Code: #divWrapper #divContainer p {
font-family: "Gill Sans MT", Tahoma, Verdana, Arial, sans-serif;
font-size: 1.1em;
padding-left: 10px;
letter-spacing: 0.05em;
line-height: 1.3em;
padding-right: 10px;
color: #6E6447;
}
Any suggestions greeted with a free ice cream. Regards, James. Hi there. I'm working on a page, and I'm a bit confused about how to place my CSS on it. The page has a nutritional search box that will be the primary focus of the entire site. Right now I have only a front page. So currently I have one external CSS file with the CSS for the page layout, along with the CSS to arrange the search box. But now I want to bring up a javascript popup with just the searchbox and another table. I can't use my original external CSS because I don't want the main page naviagation in the popup, nor do I want to copy the CSS for the search box everywhere. What is the correct way to do this? I almost want two external css files. I want to include BOTH files in the main page, and only the file associated with the search box in the popup. But in the reading I've been doing it doesn't seem possible. Even when I try copying the CSS for the search box, Firefox doesn't seem to like me attaching a different CSS file in the popup then I had in the main page. Please help! Or at least point me to a useful article. Thank you! Below is my html in which I want to embed "legend" 30px to the right of "map". After much playing with the code, I need help. "legend" is pushed underneath "map" in this version. Other arrangments have also failed. If I get rid of the "border" and "leg" div tags, they are placed side by side, but I have littile control over where "legend" is placed. Any insight would be appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <head> <title>CSS</title> <style type="text/css"> #page {position:absolute;border: 1px solid black;left: 20px;top: 20px;padding-top: 25px;padding-left: 25px;padding-right: 25px;padding-bottom: 25px} #printArea {position:relative;border: 1px dotted black;padding-right: 5px;padding-top: 5px;padding-left: 5px;padding-bottom: 110px} #leg{position:relative;border:1px solid black;width:170px;top:0px;right:0px} .map {position:relative;border:1px solid black} .legend {position:relative;top:0px;left:880:0px} </style> </head> <body> <div id="page"> <div id="printArea"> <div id="border"> <embed class="map" id="map" src="index.svg" width="850px" height="675px" type="image/svg+xml"/> </div> <div id="leg"> <embed class="legend" id="legend" src="legend/legend.svg" width="170px" height="625px" type="image/svg+xml"/> </div> </div> </div> </body> </html> Hi, I am trying to line up a few images at the top of this page: iamthelab dotcom The 2 rectangles need to be aligned to the top of the page and I can't for the life of me figure out what I am doing wrong. I'm sure the solution is simple. No help from other forums, maybe you guys can assist. Thanks! Hello, I'm new to the world of CSS. Hopefully that won't be TOO obvious to anyone looking at my code... Anyway, it hasn't taken long for me to find frustrations with IE. I'm having issues with elements on two pages of the site I'm working on: the index page (wiayouthmountainland.org ) and the apply page (wiayouthmountainland.org/apply.php ) On the index page there is some white text in the center of the page. It is where it should be in FF but is way over to the right in IE. On the apply page there are some textboxes on the right side of the page. Again, the placement is correct in FF, but they are too low in IE. I don't know if the same thing is causing the problems. I don't really know what it is I'm looking for. If someone wouldn't mind taking a look to see if they can figure out what is messing me up, I'd really appreciate it! Here is a link to the css: wiayouthmountainland.org/WIA.css . Thanks in advance! Jules I'm sure this is some basic thing that's just slipped my mind. http://www.onlineeditions.com/opportunityhouse/ As you can see, it's rendered differently between FF and IE: the content column on the right has a few nested divs to hold background images, but on FF (And Safari) the "right" div seems to have slipped down and to the left a few pixels. Code and css is all valid, per w3c. If someone can help me find what's gone wrong here, I'd be most thankful. Hey, guys. I've tried everything to get this to work. Basically the main content of our page is in a table centered on the page. We want a nice big skyscraper ad right next to the table that isn't aligned with the right portion of the page (because if it is, when the window is shrunk, the ad goes over top of the page content). How do I offset the ad position from the table? Will it work with different resolutions too? Right now I have the div tag inside the table, looking like this: Code: <div style="float:right; clear:none; margin:0 10px 0 0;"> <img src="structure/images/VendorAds/skyscraperAds/homepage/skyscraper01-Q2.jpg" width="160" height="600" /> </div> But it puts it all the way to the right next to the scroll bar, and it offsets the main content to the left. How do I get the ad to appear right next to the table without offsetting anything, and without moving over top of the content when the page is shrunk? Any help is appreciated. EDIT: I fixed my own problem. Since the main content was a table, I wrapped a table around the main content, put the ad in a <td> element, then one on the left side to recenter it. I'm brand new to CSS and I've been trying to customize a template, but it seems whenever I move the Search bar from the top left into the menu bar on the right side it offsets the placement of other items and I cannot for the life of me figure this out. My website is floydsewingmachines dot com (I guess it won't let me post the actual address?) but any suggestions or help would be greatly appreciated. Thanks! |
|||||||