|
CSS - Float Border Is Split, 75% Where It Should Be And The Rest On The Other Side Of Page
Floats always cause me some consternation. This one sort of works, except for the border and the padding/margin (which may be related to the border issue). I've only checked this on FF on a Mac so far, btw.
Right now the divs do float, but the left side of the border is a million miles away. Solving the border issue might take care of the padding/margin between #caravan and #rally (right now each tweak does nothing). Also, is it possible to get the text at the end to flow under the property changes box? Probably not, as I set a width of 65%, but that was the only way I knew to get the two boxes to float up...I guess I'd have to make that last paragraph its own div to get the text to go all the way across? The page I'm trying to figure out is here and the relevant CSS is #caravantop { background-color: #ffefca; margin: 0; padding: 1.2em 2% 0 2%; } #caravan { float: left; width: 63%; background-color: #ffefca; padding: 0; margin: 0 2% 0 2%; } #rally1 { padding-right: .1em; border: 1.2px #775b36 solid; margin-right: .5em; margin-bottom: 1em; } #rally1 h4 { margin-bottom: .6em; } #rally1 p { font-size: .7em; padding-bottom: 0; margin: .6em; } #rally1 ul { list-style-image: url(../images/icons10_webpage.gif); list-style-type: circle; text-decoration: none; font-size: .7em; margin-bottom: 1em; margin-left: 2.5em; } #rally1 li { margin-bottom: .4em; margin-left: 1.7em; } #rally1 li.lastli { margin-bottom: 2.5em; } /*#rally1 ul.nohouse { list-style-image: none; list-style-type: none; text-decoration: none; font-size: .8em; margin-bottom: .3em; margin-left: 0; }*/ #rally2 { padding-right: .1em; border: 1.2px #775b36 solid; margin-right: .5em; margin-bottom: 1em; } #rally2 h4 { margin-bottom: .6em; } #rally2 p { font-size: .7em; padding-bottom: 0; margin: .6em; } #rally2 ul { list-style-image: url(../images/icons10_webpage.gif); list-style-type: circle; text-decoration: none; font-size: .7em; margin-bottom: 1em; margin-left: 2.5em; } #rally2 li { margin-bottom: .4em; margin-left: 1.7em; } #rally2 li.lastli { margin-bottom: 2.5em; } Similar TutorialsThis is my code essentially: <div id="bottom"> <div style="float:left">store hours</div> <img src="map"> <div style="float:right">contact info</div> </div> It looks fine in Safari but it messed up in Firefox. I fixed it a bit by adding overflow:auto to the parent item (bottom div), so it actually has the red background and doesn't collapse. I haven't yet uploaded that fix yet as the problem still isn't solved. Now the div is expanding too much because the 3 items aren't being displayed inline. In firefox the image is pushing the first div beneath it. Any solutions please? Hey people, when slicing a new layout for my site I had to do so in tables for the sole reason of a problem I've had for a long time now, how to have a border images set for either side of an image? The layout is he http://www.trshady.com Now as you can see, either side of the layout I have a .gif 'shadow' which fails due to .gif not handling gradients and .png being uncompatable transparency with IE but how would I ever add these borders with CSS? Say they wasn't shadows and images of other kinds .. how would I be able to achieve such an effect? the border-image property is coming with CCS3 I believe but till then, what solutions do I have? problem solved - it seemed that the inside box was too close to the outer one, so i gave it some padding and the border-line now shows. weird is, that it is now a little bigger than the other element, but i can live with 2px ... for now hi folks, i really dislike IE i make the design for my webstore ... still i only want to use floats (no tables or other positioning) ... i am slowly advancing ... right now i am pretty much stopped in my tracks, because IE does not display the right side of 2 of my boxes (those are very similar in layout). the boxes concerning have an outer DIV and an inner DIV. the outer has a specified width in px and overflow:hidden (which has helped keeping the width). the content is other DIVs and text. note that a similar box with a UL in it does indeed display the thin borderline all the way around ..... and this is what drives me nuts. LINK concerning boxes are the shopping cart on the top right and the mailing list box on the bottom left note that the similar costructed box with the navigational menue in it above the mailinglist box does display the borderline .... oh, and in firefox everything is fine of course on a side note .... in IE; hovering over any hover item results in the bdy text losing its background color?! i am not even challenging that one yet it would be great if someone could help me out here Code:
this is for the shopping cart box:
#header_right {
color: black;
font-size: 80%;
background-color: white;
margin-top: 0.5em;
margin-right: 1.5em;
padding-left: 10px;
width: 150px;
height: auto;
overflow: hidden;
float: right;
}
#header_right_content {
color: #fff;
background-color: #f8f2dc;
padding-top: 0.5em;
padding-bottom: 0.6em;
height: auto;
border: solid 1px gray;
}
I could do this using Frames but I absolutely loathe them so I need to do it in CSS I have an A-Z across the top of the page which stays there while the results scroll below. Unfortunately, while I can do basic CSS, complicated stuff like this is way beyond me! Help would be most appreciated! I have a header where I have two different div's that need to sit opposite each other on the same line (one aligned right and the other left). I used a float since it was the simplest way to get the job done. But in the div floating right I have three hyperlinks that have borders. When I float the div the border on the top and bottom dissappear when I remove the float the border on the top and bototm re-appear. any ideas? Here's the CSS... It's raw as I'm still developing these sections. Code:
#headerRight
{
float: right;
}
#headerLeft
{
float: left;
}
#header a:link
{
border: #000 solid 1px;
text-decoration: none;
}
#header a:active
{
border: #000 solid 1px;
text-decoration: none;
}
#header a:hover
{
border: #000 solid 1px;
text-decoration: none;
background-color: #333;
color: #ffffff;
}
#header a:visited
{
border: #000 solid 1px;
text-decoration: none;
}
I'm currently creating a simple website using css and its looks fine in IE however the nav bar is not aligned with everything else in Firefox. Sorry i'm new at CSS, thanks for the help in advance. Here is the site: insightchirocare.ca Here is the css code: Code: /* CSS Document */
*{
padding:0;
margin:0;
width: auto;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
background-repeat:repeat-x;
background-color:#ffffff;
padding:0;
margin:0;
}
#container {
width:800px;
margin:auto;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/* HEADER IMAGE */
#header{
background-repeat:no-repeat;
background-image: url(images/header.gif);
height: 150px;
width: 800px;
float:left;
margin:300 px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
}
/* HEADER BACKGROUND IMAGE END */
/* NAVIGATION */
#nav{
width:800px;
float:right;
height:30px;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 40px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
}
.menu ul{
padding:0;
margin:0;
list-style-type:none;
list-style:none;
display:inline;
}
.menu li{
padding-right:0px;
margin:0 0px 0 0;
height:30px;
list-style-type:none;
list-style:none;
display:inline;
float:left;
}
span{
display:none;
}
#home a{
background:url(images/nav_bar/home.gif);
width:74px;
height:30px;
display:block;
}
#home a:hover {
background:url(images/nav_bar/home_gr.gif);
width:74px;
height:30px;
display:block;
}
#home a:active {
background:url(images/nav_bar/home_gr.gif);
width:74px;
height:30px;
display:block;
}
#about_us a{
background:url(images/nav_bar/about_us.gif);
width:82px;
height:30px;
display:block;
}
#about_us a:hover{
background:url(images/nav_bar/about_us_gr.gif);
width:82px;
height:30px;
display:block;
}
#about_us a:active{
background:url(images/nav_bar/about_us_gr.gif);
width:82px;
height:30px;
display:block;
}
#first_visit a{
background:url(images/nav_bar/first_visit.gif);
width:81px;
height:30px;
display:block;
}
#first_visit a:hover{
background:url(images/nav_bar/first_visit_gr.gif);
width:81px;
height:30px;
display:block;
}
#first_visit a:active{
background:url(images/nav_bar/first_visit_gr.gif);
width:81px;
height:30px;
display:block;
}
#gonstead_chiro a{
background:url(images/nav_bar/gonstead_chiro.gif);
width:162px;
height:30px;
display:block;
}
#gonstead_chiro a:hover{
background:url(images/nav_bar/gonstead_chiro_gr.gif);
width:162px;
height:30px;
display:block;
}
#gonstead_chiro a:active{
background:url(images/nav_bar/gonstead_chiro_gr.gif);
width:162px;
height:30px;
display:block;
}
#faq a{
background:url(images/nav_bar/faq.gif);
width:71px;
height:30px;
display:block;
}
#faq a:hover{
background:url(images/nav_bar/faq_gr.gif);
width:71px;
height:30px;
display:block;
}
#faq a:active{
background:url(images/nav_bar/faq_gr.gif);
width:71px;
height:30px;
display:block;
}
#kid_chiro a{
background:url(images/nav_bar/kids_chiro.gif);
width:124px;
height:30px;
display:block;
}
#kid_chiro a:hover{
background:url(images/nav_bar/kids_chiro_gr.gif);
width:124px;
height:30px;
display:block;
}
#kid_chiro a:active{
background:url(images/nav_bar/kids_chiro_gr.gif);
width:124px;
height:30px;
display:block;
}
#testimonials a{
background:url(images/nav_bar/testimonials.gif);
width:105px;
height:30px;
display:block;
}
#testimonials a:hover{
background:url(images/nav_bar/testimonials_gr.gif);
width:105px;
height:30px;
display:block;
}
#testimonials a:active{
background:url(images/nav_bar/testimonials_gr.gif);
width:105px;
height:30px;
display:block;
}
#contact_us a{
background:url(images/nav_bar/contact_us.gif);
width:101px;
height:30px;
display:block;
}
#contact_us a:hover{
background:url(images/nav_bar/contact_us_gr.gif);
width:101px;
height:30px;
display:block;
}
#contact_us a:active{
background:url(images/nav_bar/contact_us_gr.gif);
width:101px;
height:30px;
display:block;
}
/* NAVIGATION END*/
/* LEFT_CONTENT*/
#left_content {
height: 450px;
width: 500px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #757171;
margin-top: 0px;
margin-left: 0px;
float: left;
margin-right: 5px;
background-color:ffffff;
}
/* LEFT_CONTENT END*/
/* REG_CONTENT*/
#reg_content {
height: auto;
width: 800px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #757171;
margin-top: 0px;
margin-left: 0px;
background-color:#ffffff;
}
/* REG_CONTENT END*/
/* RIGHT_CONTNET*/
#right_content{
height: 450px;
width: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #757171;
padding: 0;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
background-color:#e3e3e3;
}
/* RIGHT_CONTENT END*/
h1 {
padding:0;
margin:0;
font-size:16px;
color:#008bcf;
font-family: Verdana;
font-weight: normal;
}
h2 {
padding:0;
margin:0;
font-size:12px;
color:#008bcf;
font-family: Verdana;
font-weight: normal;
}
p {
padding:0;
margin:0;
font-size:12px;
color:#757171;
font-family: Verdana;
}
/* FOOTER*/
#footer {
padding : 0;
width: 800px;
height: 40px;
background: url(images/footer.gif);
margin-top: 2px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
}
/* FOOTER END*/
.clearfloats {clear:both;}
A:link {
text-decoration: underline; color: #008BCF;
}
A:visited {
text-decoration: underline; color: #008BCF;
}
A:active {
text-decoration: underline; color: #18fa07;
}
A:hover {
text-decoration: underline; color: #18fa07;
}
I have stripped the whole page down to the bare bones and can not seem to get the center DIV to be the same height as the rest of the page. Is there a simple fix for this or would I need to redo it completely ? The left and right content is not always the same so their height is also variable. I have a min-height in the center DIV, and using height 100% does not seem to work either. Can anyone suggest what I could change to make it the same or suggest how I redo this so it is. Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to our web site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
body { border: 0em solid #000; background-color: #ddd; }
.bodyContainer { background-color: blue; height: 100%; width: 71.875em; margin: 0em auto; padding: 0em 0em 0em 0em; border: 0em solid #000; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.menu { background: #3F65CC; margin: 0em; text-align: center; font-size: 1.1em; font-family: Broadway; border: 0em solid #EDB6B6; padding: 0.313em 0em 0.313em 0em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.clearfloat { clear: both; }
.leftSidePanel { background-color: blue; float: left; width: 8.835em; min-height: 43.75em; padding: 0.313em 0.625em 0em 0.625em; }
.mainContent { background-color: lightblue; margin: 0em auto; text-align: center; border-left: 0.5em solid #ddd; border-top: 0.3em solid #ddd; border-right: 0.5em solid #ddd; float: left; width: 49.4em; min-height: 43.438em; height: 100%; padding: 0.625em 0.625em 0.625em 0.625em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.formWrapper{ margin: 0em auto; min-height: 43.375em; border: 0em dashed #E5E5E5; padding: 0em; text-align: left; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.rightSidePanel { background-color: blue; float: right; width: 8.835em; min-height: 43.75em; padding: 0.313em 0.713em 0em 0.313em; }
.footer { background-color: #ddd; margin: 0 auto; text-align: center; padding: 1em 0em 0em 0em; border: 0em solid #fff; font-size: 0.875em; }
--></style>
</head>
<body>
<!-- bodyContainer start -->
<div class="bodyContainer">
<!-- menu start -->
<div class="menu">
<div class="clearfloat"></div>
</div>
<div class="clearfloat"></div>
<!-- menu end -->
<div class="leftSidePanel">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<!-- mainContent start -->
<div class="mainContent">
<div class="formWrapper">
<br><br><br>
</div>
</div>
<!-- mainContent end -->
<div class="rightSidePanel">
</div>
<!-- Footer start -->
<br class="clearfloat">
<div class="footer">
some text
</div>
</div>
<!-- body container end -->
</body>
</html>
Hi, Small problem he http://www.salewhale.com/z.html The box with the "What would you like to do?" is as follows: Code: <div class="boxarea"> <div class="boxarea_left"><b>What would you like to do?</b></div> <div class="boxarea_right"><a href='3_changepass.php'>Change Password</a></div> </div> The CSS for this is: Code: .boxarea {
border: 1px solid #0000FF;
background-color: #F5F5F5;
padding: 2px 2px 2px 2px;
}
.boxarea_left {
width: 140px;
float: left;
}
.boxarea_right {
width: 300px;
}
The point is to have the left column (boxarea_left) as 140px, so that the text wraps to the next line. Does anyone have any idea why the border box doesn't really take account of the new line? It simply ignores the divs and has a basic one line height. Of course, if I put a spacer within the boxarea div, the problem will be solved - but this leaves a gap at the bottom of the box - which I dont want. Is there a simpe fix? Thanks very much! I am modifying an X-Cart implementation that the template originally put the product image in a seperate td. I have modified it to put the image in the same td as the description and used a float style on a div tag. The text is wrapping correctly. The problem is that I have a border-bottom style on the product name and it is ending up under the product image. The image is also covering the bullet on li tags. An example is http://www.adaappliances.com/produc...48&cat=0&page=1. Please do not attempt to order anything! This is not a live site yet. This is a snippet of the code. I am using inline styles for testing. Code: <div style="float:left; padding:5px"> <IMG id="product_thumbnail" src="/image.php?productid=16148" width="168" height="230" alt="Eurotech EDW254E Dishwasher" border="0"></div> <p style="border-bottom: 1px solid black"><font size="3"><strong>Eurotech EDW254E Dishwasher </strong></font></p> I have not found a way to fix this. Any suggestions? I've started using a JavaScript carousel script on my website, http://www.rockitdesign.co.uk/new/. When I loaded the page in Firefox and safari every image in the carousel would appear and then all but the top would disappear which is how it should be. Sorry for the bad explanation, any way to stop this? Thanks for taking time to read my question. How do I position 3 pictures beside eachother with no spaces between them? (so they look like one continuous picture) eg: ______ |1|2|3| |_|_|_| instead of ________ |1||2||3| |_||_||_| Thanks, Brad http://www.ilumos.co.uk/site/?page=home http://www.ilumos.co.uk/site/styleDefault.css Hi, I'm having a little trouble sending the "x Comments" div (.blogCommentCount) to the right side of its parent div (.blogItemContainer) If I try and use "float: right;" it is aligned to the right, but is shifted outside of its parent div, which isn't the idea. I could of course do this and apply a negative margin-top, but I'd rather use a non-hacky method if I could. Thanks ilumos Ok, I have a website that i'm building with about 25 pages, and I keep on having to change the side navigation bar, and then I have to copy and paste it on each page to update it. IS THERE A WAY FOR ME TO ONLY UPDATE IT ONCE AND IT UPDATES TO ALL THE PAGES? Is the answer css? or i-frames(or whatever it's called) If so, then how would I do this?! PLEASE HELP! http://www.ilumos.co.uk/site/ http://www.ilumos.co.uk/site/style/styleDefault.css As you can see on the left there is a "glowing" blue-white fadey thing going on on the left of the page, but it stops after the header (#header) for no apparent reason. The page renders fine in IE, but in Firefox or any other standards obeying browser it stops there. the CSS for the page border on the left is as follows: #wrap { background: url("../images/ilumosPageFadeLeft.jpg") repeat-y; padding-left: 25px; width: 750px; } (the wrap div contains all of the page's content) How can I make the image extend to the bottom of the page? Thanks Hi, I'm having a slight problem with my css. I want to display a comment with a number of images to the right of it. e.g "Excellent" plus 5 stars next to it (note: images of stars) so i tried this: Code: <div id = "commentText"> Excellent </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "commentText"> Fantastic </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> css Code:
#commentText
{
font-size: 100%;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
padding-left: 30px;
}
#star
{
display: inline;
height: 24px;
background-image: url(images/star.png);
background-repeat: no-repeat;
padding-left: 20px;
}
I currently have comment with 3 stars displayed underneath it - however they are only half being shown for some reason. Any help is appreciated to help me get the desired effect. Thanks! Alright, I run a joomla site and im working on making a 100% tableless xhtml compliant template. I'm very new at this so im trying my best to learn. I used the Lean version of skidoo's layout as the base and then added all the appropriate php tags needed to make it a joomla template. For the one part I need two modules to load right next to each other near the top of the page to mimic the table version of the Latest News and Popular Modules. I'll show you code snipits of how I did it. Code:
html:
<div id="contentColumn">
<div class="inside">
<!-- middle column content begin -->
<p class="blocktext">
<?php mosLoadModules( 'banner', -1 ); ?>
</p>
<div id="users">
<?php mosLoadModules ( 'user1' ); ?>
</div>
<div id="users">
<?php mosLoadModules ( 'user2' ); ?>
</div>
<p>
<div id="nofloat">
<?php mosLoadModules ( 'top' ); ?>
<?php mosMainBody(); ?>
<?php mosLoadModules ( 'bottom' ); ?>
</div>
css:
/*top users */
#users {
float:left;
width: 300px;
}
#nofloat {
float: none;
}
So anyways this does indeed put each div tag side by side but my problem is that I need the following PHP code ( <?php mosLoadModules ( 'top' ); ?> <?php mosMainBody(); ?> <?php mosLoadModules ( 'bottom' ); ?>) to return to the next line after the div's, but instead it jumps everything to the right and breaks the template. So I added the nofloat css and that fixed it and put the rest of the content below the side by side div's but now it doesn't work in FireFox. Now I tried padding-top and that worked in both browsers, but its not flexible as the side by side div modules are not always there and I don't want 200px of white space on the pages that don't show it. Also as a side note I tried putting <?php mosLoadModules ( 'user1' ); ?> and user2 into separate div tags that that floated left and right but it had the same outcome, so I stuck with one float left that seems to work the same. My question is what can I do to make this content show after the side by side div's and not beside it in both browsers? You can see what I mean by looking at this test site in both IE 6 and FireFox. http://www.wii-volution.com/testbed/ Thanks for any help you guys can give me! Hi. I've a div container with a gray bg color then inside I've two DIV (left & right). It works on IE but on firefox the bg color the the two DIV is white and if I add bg color=GRAY for the 2 DIV the middle is white. And I don't want to put bg color on the class = left and right because if I want to reuse these with other stuff then the color won't match to other things. How can I fix this problem? Please take a look at the following link with IE & firefox and u know what I mean. Please take a look at source code or in here. Thank you!!! http://yourbestproduct.com/test.html CSS CODE: body { text-align: center; } #container { width: 800px; margin: 0 auto; } #sub_title { background-color: #E6E6E6; background-repeat: repeat; padding: 2px; width: 796px; color: #848484; } .left { float : left; margin-left: 10px; } .right { float : right; margin-right: 10px; } HTML CODE: <div id="container"> <div id="sub_title"> <div class="left">Left Message</div> <div class="right">Right Message</div> </div> </div> Hi! I want to have let's say 4 divs of width:25% horizontally side-by-side. Ex: (I'll ry to draw it ) | | | | | | | | | | | | | | | Thank you. Hi. I'm a design student working on a website for my boss, and I've come across a problem and was wondering if someone could help me out. It might be a simple fix, but I can't seem to figure it out. I have a body wrapper div (subtitle, body text, etc) on the left that's approx. 705 px wide and a vertical navigation bar div on the right that's about 240 px wide. I've tried floating the body wrapper left and the navigation buttons right, but one always ends up sitting below the end of the other. When I use the "clear right" or "clear left" commands, it doesn't help. Any ideas what I could do to get them to line up on the top? I want them to sit next to one another. Thank you very much for any ideas! Britta Hi, Please help! I have multiple ul lists and I'm trying to float each list left and center on the screen all of them using css. I'm not trying to have an inline list. I'm trying to keep the three list, float left but center on the page. floating works but I'm having problems centering on the page. I have used margin-left and right:auto but because I'm using float left if stays on the left. Does anyone have any solutions. thank-you in advance |
|||||||