|
CSS - Text Outside Of Floating Div
I have a 4 column div layout using floats.
When I resize the browser the text in the columns goes outside of the div, and over everything below it. Is there any way to insure that as the browser is resized the text will stay inside it's div? Here's an example of my code: CSS: Code:
div#middle {
line-height: 130%;
text-align: left;
margin-left: auto;
margin-right: auto;
min-width: 800px;
}
div#featured {
background-color: #666;
color: #333;
border-right: 1px solid gray;
width: 30%;
float: left;
padding: 1em;
font-size: 14px;
}
div#snippets {
background-color: #444;
color: #333;
width: 20%;
float: left;
padding: 2em;
font-size: 12px;
}
div#tools {
color: #333;
background-color: grey;
width: 150px;
float: left;
padding: 1em;
}
div#ads {
background-color: #444;
color: #333;
width: 100px;
float: left;
padding: 1em;
}
HTML: Code: <div id="middle" class="minmax"> <!-- Main Articles --> <div id="featured" class="vsize"> <h1>Featured Header</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <!-- Short Articles --> <div id="snippets" class="vsize"> <h1>Snippets Header</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <!-- Search, other tools, event calendar --> <div id="tools" class="vsize">Tools</div> <!-- Ads --> <div id="ads" class="vsize">Ads</div> </div> Similar TutorialsFollowing on from an earlier thread I've split one problem off into the code below which can also be found at http://alphaworks.co.uk/test/float.htm The problem should be obvious from the text but just to confirm I want the left boundary of the text to be straight and not to flow back under the image as it is currently doing. I can do that with a margin-left:110px on the .description class but I'd rather have a solution which didn't depend on knowing the width of the image as this may well vary. Is there a way to do this? Thanks, Geoff Code: <html>
<head>
<style type="text/css">
.image
{
border : solid black 1px;
margin : 5px;
padding : 5px;
float : left;
}
.description
{
}
</style>
</head>
<div class="image">
<img src="" width="100" height="100"/>
</div>
<div class="description">
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
</div>
</html>
Hi Guys, Thanks to some incredible pointing me in the right direction yesterday, i have finally got to my 3-col layout that I want. The only issue is now my news box will let content role behind it, but really i want it to push down as with the footer bar! Can anyone point me in the right direction please? Stylesheet below and output at www.generating-sets.com/index.new2.php PHP Code: html {height:100%;} body { margin:0; padding:0; height:100%; background-image:url(bgs.gif); background-position:top right; background-repeat:repeat-y; background-color:#ffffff; font-family: Times, "Times New Roman", serif; } #wrap { background-image:url(bg.gif); background-position:top left; background-repeat:repeat-y; min-height:100%; } * html #wrap {height:100%} #header { background-image:url(label2.gif); background-position:right; background-repeat:no-repeat; background-color: #000066; border-bottom: 2px #ffffff solid; color: #ffffff; margin:0; padding:0; height:80px; } p {margin:5px; padding:0;} h1 { position:relative; line-height:80px; margin:0; padding-left:20px; } #left { float:left; width:150px; color: #ffffff; text-align:center; background-color: #000066; } #main { position:relative; margin-left:200px; } #right { float:right; width:10px; text-align:center; color: #ffffff; background-color: #000066; } #content { padding:5px; margin-right:200px; text-align:left; } #clearfooter { clear:both; height:80px; overflow:hidden; } #footer { height:40px; background-color: #000066; border-top: 2px #ffffff solid; margin:0; padding:0; margin-top:-0px; color: #ffffff; text-align:center; } div#newsbar {padding: 1%; text-align: center; height:150px; background-color: #000066; color: #ffffff; margin-left: +150px; margin-right: +10px; margin-top: -190px; border: 2px #ffffff solid; width: auto;} code { font-size:0.8em; border:1px solid navy; background-color:white; color:#333333; padding:10px; display:block; width:80%; margin:10px auto; overflow:auto; } There must be a reason why it works like it does, but i don't know!! Charlie I am a bit lost as to how to accomplish the following: I have two divs of unequal width, let's say 300 and 100 for example. I need to float both of these divs to the right and have them stacked on top of each other. That's easy enough on it's own, but I need text to wrap around them properly. ie if the wide one is on top the text should flow to it's left edge, then flow underneath it it the narrow divs left edge, then underneath the narrow one. I tried doing this with relaitve positioning, but have had no luck. If I simply float them both to the right, they line up side by side as expected. If I wrap them both in one container div, the text will flow to the left edge of the wide div but obviously not wrap underneath it to the left edge of the narrow div. Any ideas? Hi, Okay my boss wants me to do this: Have a rectangualr div that has another div in it that is smaller and is in the (vertically and horizontally) center. No probs, but the one in the middle has to have text floating around it, thats above left right and bottom. Me thinks this is impossible! Does anyone have any idea??? Cheers, See the image at http://i187.photobucket.com/albums/x205/vitainf/IEhelp.png - having trouble to get it showing the image with the bbcodes :S As you can see the menu to the right, which is known as '.sidebar' in the css followed below, is sort of pushing the main content, which is known as .content in the css below, down. Anyone has any idea how to fix this? Style Sheets Code: body
{
text-align: center;
background: #800000;
color: #fff;
}
* {
padding: 0;
margin: 0;
}
div#container
{
margin-left: auto;
margin-right: auto;
width: 700px;
text-align: left;
}
#spacer {
height: 50px;
}
#header {
height: 100px;
width: 100%;
background: url(ctfiles/logo.png) no-repeat top center #000;
}
#container {
background: #fff;
padding: 10px;
}
#main {
background: #000;
color: #fff;
width: 700px;
}
.sidebar {
float: right;
text-align: right;
background: #000;
color: #fff;
width: 30%;
padding-left: 8px
padding-right: 12px
}
.content {
color: #fff;
background: #000;
width: 70%;
margin-left: 2px;
margin-right: 2px
}
HTML/Template/PHP w/e Note: It's a template for the MODx CMS, which explains some of the calls like [(site_name)]. The lorum ipsum is in the [*content*] call, the menu in the [[wayfinder...]] one. PHP 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> <title>[(site_name)] | [*pagetitle*]</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="[(base_url)]chinatown.css" type="text/css" media="screen" /> <base href="[(site_url)]" /> <!--[if lte IE 6]> <style type="text/css" media="screen, tv, projection"> body { behavior: url(assets/js/csshover.htc); } /* hover:anything support */ #content { margin-left: 22px; } /* to avoid the BMH */ a, a:link { border-bottom-style: solid } /* becuase IE just doesn't dot */ </style> <script type="text/javascript" src="assets/js/sleight.js"></script> <![endif]--> </head> <body> <div id="page"> <div id="spacer"> </div> <div id="container"> <div id="header"> </div> <div id="main"> <div class="sidebar"> [[Wayfinder? &startId=`0`]] </div> <div class="content"> <h4>[*longtitle*]</h4> [*#content*] </div> </div> <div id="footer"> [(site_name)] is powered by <a href="http://modxcms.com/" title="Powered by MODx"><strong>MOD</strong>x Content Management System</a> <br /><a href="[~11~]" title="Link to our Blog RSS Feeds">Blog Entries (RSS)</a><br /> MySQL: [^qt^], [^q^] request(s), PHP: [^p^], total: [^t^], document retrieved from [^s^]. </div> </div> </div> </body> </html> Trying to achieve this: I'm having trouble figuring out how to float the right ad space correctly. This is what i've got so far: http://gatehouse.graffetto.com/floating_divs.html Code: Code: <html>
<head>
<style type="text/css">
.mainDiv {margin: 0; border: 1px solid black; padding: 10px; width: 600px; float: left;}
.image {height: 100px; width: 100px; background-color: red; float: left;}
.rightAd {float: right; background-color: blue; height: 250px; width: 300px; clear:right; margin-top: 300px;}
</style>
</head>
<body>
<div class="mainDiv">
<div class="image">test</div>
<div class="rightAd">test</div>
<div class="textDiv">
Text content
</div>
</div>
</body>
</html>
I know this is simple i just can't figure it out for some reason.. thanks for any help. given the following structu #container { width:775px; margin:0px auto; background-color:#fff; border-left:2px solid #424242; border-right:2px solid #424242; border-bottom:2px solid #424242; border-top:2px solid #424242; background-image:url(cont_bg.jpg); background-repeat:repeat-y; } #nav { padding:0px; height:100px; background-color:#4E7395; background-image:url(nav.jpg); background-repeat:no-repeat; background-position:top left; } #masthead { padding:0px; height:200px; background-image:url(header.jpg); background-repeat:no-repeat; background-position:top left; background-color:#E6E6E6; border-bottom:4px solid #4e7395; } #leftnav { float: left; width: 375px; margin-left:0px; padding:0px; background-color:transparent; } #rightnav { clear:right; float: right; width:392px; margin-right:0px; padding:0px; background-color:transparent; } Would it be possible to put text paragraphs side by side inside the rightnav <div> Floating the text in that manner, it would appear that there were two mini-columns, instead of just the one. Is that possible? thanks a million jon I currently have the following layout Code:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
how do i go about making the same layout but using CSS. Each <td> is 50% wide Hi, Can someone help me with why the following header bar doesn't work in Firefox? It just shows the very top of the bar with the two other divs inside of it. Code:
<div class="cmsHeader">
<div style="float: left;">Page Name</div>
<div style="float: right;"><a href="" title='Add Page'><img src='images/icons/file_(add)_16x16.gif' border='0' alt='Add Page'></a></div>
</div>
.cmsHeader{
background: #809096;
padding: 5px;
width: 98%;
color: #FFFFFF;
}
.cmsHeader a{
color: #FFFFFF;
text-decoration: none;
}
.cmsHeader a:hover{
text-decoration: underline;
}
hi, i am a total newbie with css and trying to create a floating divider. an example can be seen at www.payjunction.com. does anyone know a tutorial on how to create one? thanks for the help in advance Learning CSS and trying to emulate the following table: Code: |--------------------------------------| | Text 1 |----------------| | | Text 2 | Inner box text| | | Text 3 |----------------| | |--------------------------------------| I can get a nested div to work vertically but not horizontally. I'm trying: Code:
div#container { float: left }
div#title { float: right }
<div id="container">
hello<br>hello
<div id="title">
Text 1<br />
Text 2
</div>
</div>
Which is producing: Code: |--------------------------------------| | Hello | | Hello | | |----------------| | | | Text 1 | | | | Text 2 | | | |----------------| | |--------------------------------------| Perhaps a positioning thing which I don't understand yet? It's not homework so you don't have to do it for me, but rather you could just point to knowledge sources.... Tx! Hi Everyone, I've been doing modest CSS for a while now and feel like I have a good grasp of it, and generally find a way of doing what I want. But, this has always bugged me and I need to understand what is going on... I think it's a question of Floating. This is in reference to http://www.arabellamusic.co.uk I want the blog posts to be on the left, and some other content on the right. How is the best way to go about doing this? You can check my source, but this was my thinking: Code: HTML
<div class='inner'>
<div class='left'>
BLOG PHP HERE
</div>
<div class='right'>
SOME OTHER STUFF HERE
</div>
</div>
And the CSS:
.inner { width:788px; }
.left { float:left; width:50%; }
.right { float:left; width:50%; }
If you grab my stylesheet and my source, you will see that I have a couple more things in there, but I don't think they could be affecting the rest (text-align etc...) So, am I doing this wrong? I have floated columns in other websites this way and it sometimes works, sometimes doesn't. Incidentally, once it would only work when I set 49% to each, I was assuming this was something to do with the box model I read about, but wasn't too sure. I will try not to play around with the site too much until I get a reply or two, but a few things may jump around as I try stuff! Thanks in advance... James I have 3 tables in a div. I have two of the tables one on top of the other. I wanted to place the third table to the left of the bottom table. So I placed the second table relative and left -50px. I placed the third with position absolute, top -70px and float right to achieve this layout. Is there a better way of doing this out of curiousity? I use form field hints on my sign up page. I am trying to float it to right with the codes below but its not happening. .hint { float:right; display: none; position:absolute; width: 150px; border: 1px solid #aaaaaa; background: #d7d7d7; } www.pearl.ru/isdunyasi/signup.asp Hi I use DIV to display image thumbnails in a row from php loop. for each div containing image I have set the attribute float: left; so that multiple images can be displayed in parallel. Now the problem is that if I have a single image then there is no need to show it on the extreme left of the page but in the center, but the thumbnail is displayed on the extreme left, here is my code till now, PHP Code: echo "<div style=' text-align: center; border: solid 1px #993333; padding: 1px; margin: 2px; float: left; margin-left: 6%; '>"; echo "<div style=' text-align: center; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;'> <a href='/$path' rel=\"lightbox\"><img src='/print_resize_image.php?image=$path&type=$extension' width=200 height=150 border=0 ></a> </div></div>"; Hi im experiencing big problems with creating this layout. I spent whole day with positiooning this divs but i cant do this final layout. Everytime i want to float divs to left DIV 1 and DIV 2 are ok but DIV 3 jump to new line under DIV 2 and dont fit the gap between DIV 3 and div 1 . Can someone please help me ? Thanks ... link to image : xipic.eu/ufiles/njf25uy8_divs.png http://tonglebeak.com View it in FF, and the floating boxes correctly appear on top of the white div underneath of it. View it in IE, and the floating boxes push the white div below them. How can I get IE to render this the same as FF? Ok. So after some one i don't know on a website i was reading told me i should replace my tables with CSS i decided to listen to them. Now the website's top bar should look like this: http://www.leeksoftware.co.uk And i decided to do each box as a DIV. BUT! I can't get them all in a line. I can get the yellow one to the right of the long one but then i cant get the rest in the line. So far the CSS is: Code:
div.logo
{
height: 70px;
width: 618px;
background-color: #476cD9;
float: left;
}
div.home
{
height: 70px;
width: 100px;
background-color: #E29942;
margin-left: 619px;
float: left;
}
div.soft
{
height: 70px;
width: 100px;
background-color: #CC3333;
margin-left: 719px;
}
div.tuto
{
height: 70px;
width: 100px;
background-color: #006666;
margin-left: 819px;
}
div.cont
{
height: 70px;
width: 100px;
background-color: #254D78;
margin-left: 919px;
}
I tired adding float left to all of them but that made them go diagonal. Can any one help? Thanks Matt |
|||||||