|
CSS - Css Float Wrap
Hi,
I have a site which, due to a lot of extraneous code from the CMS, essentially, looks like this: Code: <div id="wrapper"> <div id="header"></div> <div id="left-panel"> [content] </div> <div id="full-panel"> <div class="standard-article"></div> <div id="prices">[table goes here]</div> </div> <div class="clear"></div> </div> Basic CSS: Code: #wrapper {
width: 1007px;
}
#left-panel {
float: left;
width: 216px;
}
#full-panel {
width:735px;
}
The site is designed to be a fixed width of 1007px (and this is set in the CSS in various location: wrapper, header etc). My problem is that, within the 'prices' div, there is a table which can be many columns wide. At the moment, in IE6 (Firefox is fine), the full-panel div wraps down below the left-panel when I would actually prefer it to stretch outwith the boundary of the 1007px wide site. Is this possible? Can anyone assist? Thanks in advance. R Similar TutorialsI'm having a bit of trouble getting multiple <div> to wrap around a floated <div> in IE [tested in IE8]. Using "clear: all;" it looks fine in Chrome and Firefox, but I'd prefer it to validate properly, as well as getting it working in IE! Online example at http://www.afcwgb.co.uk/boxtest.php Any tips gratefully received Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Floating Boxes</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
background-color: #C8C8C8;
font-family: Verdana, helvetica, arial, Geneva, sans-serif;
font-size: 11px;
text-align:center;
}
#boxtest_container {
margin-right: auto;
margin-left: auto;
font-family: Verdana, Arial, Helvetica;
font-size: 11px;
background-color: #FFA;
border: 1px solid black;
width: 790px;
padding: 5px;
}
#boxtest_header {
padding: 10px;
border: 1px solid black;
border-bottom: 5px;
}
#boxtest_index {
padding: 10px;
border: 1px solid black;
}
#boxtest_footer {
padding: 10px;
border: 1px solid black;
}
#boxtest_rightbox {
width: 225px;
border: 1px solid black;
background-color: #00ff00;
float: right;
padding: 5px;
margin-left: 5px;
margin-bottom: 5px;
display: block;
}
.boxtest_post {
border: 1px solid black;
clear: all;
overflow: hidden;
margin-bottom: 5px;
}
#boxtest_mainbox {
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<div id="boxtest_container">
<div id="boxtest_header">Header</div>
<div id="boxtest_index">Index</div>
<div id="boxtest_mainbox">
<div id="boxtest_rightbox">
<div align="center">Rightbox</div>
<p>This box is "floated" to the right of the page.</p>
</div>
<div id="boxtest_leftbox">
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
</div>
</div>
<div id="boxtest_footer">
<a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10.gif" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> - <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
</div>
</div>
</body>
</html>
Hello, I'm new to css layouts. I had to float:left every element so the heights stretch problem is if the image in "page_c_left" is wider than 45% then "page_c_right" will automatically go on the next line. (in Firefox, IE seems to wrap the text without moving the element). also, i wanted to have the content displayed first for non-css browsers, but the examples used position:absolute. when the impression i got was that float is preferable to position. i'm very confused on which method to use for layouts. what method would you use for complex css layouts? float, position or other? this is code with the text wrap problem Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
#main_c {
float:left;
width:770px;
padding: 10px;
border: 1px solid black
}
#header_c {
float:left;
border:1px solid brown
}
#page_c {
float:left;
width:100%;
border:1px solid red
}
#page_c_left {
float:left;
padding:10px;
border:1px solid blue
}
#page_c_right {
float:left;
width:55%;
padding:10px;
border:1px solid green
}
#footer_c {
float:left;
border:1px solid yellow
}
</style>
</head>
<body>
<div id="main_c">
<div id="header_c">
THIS IS THE HEADER
</div>
<div id="page_c">
<div id="page_c_left"><img src="../../photos/image.jpg" alt="image" /></div>
<div id="page_c_right">RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br />RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /></div>
</div>
<div id="footer_c">
THIS IS THE FOOTER
</div>
</div>
</body>
</html>
if you could help, thank you subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) Hi There - Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about. Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section. Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later. Then there's the next section. Rounded corners. Contains the entire page. On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section. Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links. ---------- First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back. Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section. If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug. So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu. --------- It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners. Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow. Code: <div id="top part" logo and searchbox </div> <div> that pesky space that disappears in IE when roll over primary links </div> <div id=navcontainer> dropdown and tabbed menu </div> <div id="navigation" class="menu> <!-- couldn't find the menu class in the css --> <div id="primary" class="clear-block"> contains barmenu - very fussy </div> </div> Here's the relevant CSS: Code:
div#navigation {
background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}
#primary {
line-height: 30px;
}
#primary ul {
padding:0;
margin:0;
list-style:none;
}
#primary li {
display:inline;
}
#primary a {
font-weight:bold;
display:block;
float:left;
padding:0px 14px 0px 14px;
margin: 0px 1px 0px 0px;
font-size: 95%;
}
#primary a {
background-position:0% 0px;
}
#primary a:hover {
text-decoration: none;
background-position:0% -42px;
}
#primary a.active {
background-position: 0% -84px;
}
#primary a {
background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
color:#666666;
font-size: 120%;
font-family:Arial,Helvetica,sans-serif;
}
#primary a:hover {
color: 666666;
background: #B8B8B8;
}
#primary a.active {
color: 666666;
background: #B8B8B8;
}
This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture. here is my css style sheet. A demonstration of the problem can be seen at: http://www.yourline-online.com/demo05/?How_to_create_pages Code: div.float {
float: left;
BORDER-RIGHT: #808080 2px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #808080 2px solid;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: medium;
PADDING-BOTTOM: 20px;
MARGIN: 16px 2%;
BORDER-LEFT: #808080 2px solid;
COLOR: #000000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #808080 2px solid;
HEIGHT: 200px;
WIDTH: 150px;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}
div.float p {
text-align: center;
}
div.container {
border: 2px dashed #333;
background-color: #ffe;
}
div.spacer {
clear: both;
}
MY HTML is like this: Code: H1>How to create pages</H1> <P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P> <P></P> <DIV class=container> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> <P>caption 1</P></DIV> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100> <P>caption 2</P></DIV> <DIV class=spacer> <DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100> <P>caption 3</P></DIV> <DIV class=spacer></DIV></DIV></DIV> Hi all, I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage: http://www.houseofhawkins.com/index.html which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text. They are links with the following CSS attached: div#Header #MenuSection a.MenuTab { PHP Code: filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0'); font-weight: bold; text-align: center; font-size: 1.3em; background-color: #BCD6BC; border-style: solid; border-width: 1px; border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5; margin: 0 5px 0 2px; height: 1.5em; width: 140px; padding: 5px 1px 1px 1px; } div#Header #MenuSection { float:left; margin-top: 30px; } here is the HTML code for that part of the page. PHP Code: <div ID="MenuSection"> <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a> <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a> <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a> <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a> <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a> </div> <div style="clear:left"> </div> I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work! I wish to understand why its like this... I have attached the CSS and the file if that helps anyone. Thanks for the help and advice. Hi guys, I normally just look at forums and lurk without joining however I've run into a problem in which case I have to ask. I apologize be for hand if this is in the incorrect place or if it sounds rude (from a person who just joined.) I'm having problems position my menu inside a wrap and to have it fully extend to the end (100%). I'm met with a couple of problems with everything I try. I would post a picture, however It wont let me as I just signed up. If needed I will reply with the link spacing out the url so its accepted, but thats if you require it. Here is the CSS code I use. #menuwrapper { /*holds menu*/ float:left; position:fixed; margin: 0; padding: 0; width: 900px; height: 2em; background-colorink; border: thin solid orange; } #iframe { width:900px; height:500px; border: 1px dashed purple; margin: 0; padding: 0; text-align:center; z-index: 1; } .logo { width:900px; z-index: -1; } /*nav*/ #nav { width: 100%; height:2em; font-size: 14px; color:green; z-index:3; position:absolute; } #nav ul { margin: 0; padding: 0; width:100%; list-style: none; overflow:hidden; } #nav a { text-decoration:none; color:green; } #nav li { position:relative; /*main*/ list-style:none; float:left; width: 8em; height:30px; line-height: 2em; background-color: #e3d0d3; } #nav li:hover { /*hover when mouse goes over - default*/ background-color: #c4c5c7; } #nav li:hover a { /*text hover - col etc*/ display:block; float:left; text-align:center; } #nav li ul { display:none; } #nav li:hover ul{ display:inline; float:left; height:auto; margin:0px; padding:0px; text-align:left; } #nav li:hover ul li { width:100%; height:2em; border:none; border-bottom: 1px dotted black; } Any help on this will be a huge help. Many thanks G. I'm creating a textbox that user text will be entered into. It has preset dementions, and I need to be able to scroll down when the text exeeds the height, but I need to be able to force the sides to wrap..... I was using this: <pre style="width:110px; height:130px; overflow:scroll"> but that let's them scroll to the side, too, I want to force a wrap on the sides, but still scroll vertically.... is there another way to make text wrap and not expand the div? i.e a div 200px wide expands if too much text is put in the box. On other websites I have seen this happening and looked at the code but I couldn't see anything I wasn't doing? The only way I can fix it is by adding this to the css: word-wrap: break-word; surely there is another way??? This isn't a problem I just am interested to find out how else you can do it because I can't work out how else you can do it thanks when text is displayed in a div.. it only goes 75% of the width of the div and then line breaks. I want it to go 100% of the div and then line break. How do i solve this. Here is the css for the div. Code:
.message {
float:left;
width:98%;
background-color:#EFEFEF;
border: 1px solid black;
padding:4px;
overflow:auto;
margin-left:3px;
min-height:120px;
}
Is there any way to add a link to a wrap image Under Page structure I have made 4 wraps (displaying the relevant one-..image path is made-up) Quote: blah blah... #wrap4 { background:url("http://www.ssswww.com/yyy.gif") no-repeat 95% 0.3%; padding:15px; width:100%; width/* */:/**/auto; width: /**/auto; } #content { max-width:890px; padding:0 30px 50px; ...blah blah And under Body: Quote: <!-- Begin wraps --> <div id="wrap"><div id="wrap2"><div id="wrap3"> <div id="wrap4"> All I want to do is attach a link to the #wrap4 image so that the whole image would be a one giant link. Does anyone know a way how to do it? Thanks! Hey all! I'm having a major word-wrap issue in IE and it's driving me bonkers. I've tried to research it, but couldn't find anything. Most of the problems people have with word-wrap are in FF, but I'm having noooo problems with it FF. I have a left nav for the site I'm building and I'm forcing a word break at 125px. In FF and IE, it forces the word break just fine. However, in IE, it also bumps out the width of the above div tag to what the width would be if the tag wasn't forced to break. It looks like all the div tags are the correct width, but the #col1 td tag won't allow a max-width. That's what I'm thinking anyway. Here's how it is in IE (ignore the borders): http://www.abellefeuille.com/mg/Untitled-3.gif Here's how it's supposed to look (again, ignore the borders): http://www.abellefeuille.com/mg/Untitled-3-FF.gif Here's the code: CSS: Code: #col1{width:148px;
vertical-align:top;
color:#666666;
font-size:12px;
padding-top:20px;
padding-bottom:20px;
}
.view_ln{max-width:125px;color:#333333;font-size:11px;font-weight:bold;padding:2px 0px 2px 0px;}
.view_ln h1{word-wrap:break-word;}
HTML: Code: <td id="col1" style="border:1px solid green;">
<!-- viewing -->
<div id="view" style="border:1px solid blue;">
<div class="ln-title">Viewing</div>
<div id="ln_keyword" class="view_ln">
<span class="line">Activity:</span><br/>
<h1>ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppa</h1> <a href="" class="x-search">(<span>x</span>)</a>
</div>
<div id="ln_brnd" class="view_ln">
<span class="line">Brand:</span><br/>
<h1>Marmot</h1> <a href="" class="x-search">(<span>x</span>)</a>
</div></td>
Any advice will be most appreciated. THANKS!! i am making a web page using CSS. At the bottom of the page I have a box from left to right with thumbnails in it. I do not want these thumbnails to wrap. I tried whitespace:nowrap, but this makes the page really wide. The box the images are in has AUTO for the width. So if I re-size the window the width of the box re-sizes. Ok, I thought this would be simple, but I was wrong. I have a simple <textarea>. In this textarea, I do not want to have the text wrap at the edge of the text box. Seems simple. Well, here's where the monkey **** starts to fly. It turns out that the w3c has deprecated the "wrap" attribute in XHTML 1.0 (which is the standard I use). Ok, there should be a CSS property to take care of this then, right? Wrong, as far as I can find anyway. I have found the white-space property and this sort of works in IE (but no horizontal scroll bar) and not at all in Firefox. Is there anything that I have missed that actually works correctly in multiple browsers, besides the "wrap" attribute (which, incidentally, works perfectly in both browsers)? My advice to me is to start drinking heavily. cadrunk: Greetings, How do you make a paragraph wrap around an image that is floated to the right or left? And what I mean here is not placing the image in a specific place in the middle of the paragraph code and then floating it, but wrapping text that comes from a tag like <p>$paragraphContent$</p> around an image that is floated left or right. Like basically, you don't know what exactly the text of the paragraph is, but whatever the text will be like, you want it wrapped around the image, and the image to be nicely placed in the middle of that paragraph. And can you do this with a number of paragraphs inserted in a <div> tag for instance? I mean just one image for all those paragraphs, to be placed neatly in the middle? Thanks for anyone taking the time to help and give tips. Hello! I have a little bit of a problem. I'm trying to create a drop down with a fixed width, but have the options be a flexible width (in other words, it flexes with the content. It works just fine in Firefox and Chrome, but surprise, surprise, IE cuts it off. Is there anyway to trigger word break or something in IE? I tried a line break and that didn't work either. Thanks for any input! Currently I have this: <div style="padding:5px; overflow:auto; border:1px solid #c0c0c0; font-size:13px; background: #EEE;"> mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd </div> I want to make it so that it will always stay on 1 line, and a horizontal scroll bar will appear if the window gets too narrow. How can I do this? edit: I can't use <pre> tags because the destroy the formatting in a more annoying way. Can someone help me with this please...I've been attepting to beat this for several days, without success (although I've learned alot). My goal is displaying images, while using the browser to automatically wrap the images, so the user doesn't have to pre-define rows/cols. Currently, I just use HTML and stick a bunch of IMG elements one after the other. I would like to start using CSS to create border(s) and [optionally] image info. The page is laid out such that I have a DIV element containing all the images. Inside that DIV, I want each row vertically aligned, and horizontally centered (in the DIV), again, with the browser auto-wrapping the "list" of images at the width of the containing DIV. Although I've tried dozens (or more) combinations, I have been consistently testing with an IMG, surrounded by a DIV to create one border, surrounded by another DIV to create another border. In between the DIVs, I may add text info about the image. I originally started with a single DIV, and defined the IMG with a class that added a border. I switched to the two DIVs, to make it easier to test combinations. If the DIV holding the IMG has it's "display" set to "inline", I think that it would be the same as having an IMG with a class, anyway. It seems that I can get close to the alignment (both vertical and horizontal) I'm looking for, if I make the DIVs "Display: Inline", and do not float them; and set the IMG to "Vertical Align: middle". This creates various problems in different browsers. So I doubt this is the right way. If I float the DIVs left, everything about each image looks correct, but I can't get the vertical alignment nor the horizontal centering. Another side-effect that I don't like is that if an IMG is moved to the next line, it may not get floated all the way to the left if a previous IMG on the same row was taller (ie. sticks down further in the row). I think this is because of the rule that says floats should go the top as much as possible, so rather than the wrapped IMG going down a few extra pixels and then going all the way to the left, it stops at the IMG from the prvious row that sticks down the most. I think I've stated clearly what I'm trying to do, I'll include some sample code to help clarify further. Any help or suggestions is very much appreciated. -Jeff Code:
...
<style type="text/css" media="screen"><!--
.pagebox { margin: 12px; padding: 12px; }
.picborder2 { background-color: silver; float: left; margin: 12px; padding: 12px; border: solid thick purple; display: inline; }
.picborder1 { background-color: red; float: left; margin: 12px; padding: 12px; border: solid thick teal; display: inline; }
--></style>
...
<body>
<div class=pagebox>
<div class=picborder2>
<div class=picborder1>
<img src="thumbnail_01"/>
</div>
</div>
<div class=picborder2>
<div class=picborder1>
<img src="thumbnail_02"/>
</div>
</div>
...
<div class=picborder2>
<div class=picborder1>
<img src="thumbnail_NN"/>
</div>
</div>
</div>
</body>
...
Hi all, How do you wrap text in a div from the x-coordinate but the y-coordinate must have a scroll bar. CSS Code: Original - CSS Code .leftHand { height:300px; overflow-y:scroll; position:relative; width:550px; background-color:#F7FAFC; word-wrap:break-word; display: block; }
HTML Code: Original - HTML Code <div class="leftHand" id="leftHand"> </div> <div class="leftHand" id="leftHand"> </div> Hi all, Is it possible to wrap text in a Drop Down Box?? Regards, Stephen |
|||||||