...and by 'no reason' I mean; for a reason I'm clearly (and likely blatently) overlooking. This is such a NOOB question - but I for the life of me can't figure out what's going wrong with my floating divs.
As seen here: http://codysilfies.com/kenji/beta.html
I've got a Container div (#Wrapper), which houses a few divs - among them a content area (#content) which has a menu (#menu) that floats left; and a div to house text (which doesn't have an ID just yet).
I THOUGHT that aligning them both left would have the two divs sit right against each other; but it's not working that way. The box with text overlaps the menu messing with the layout. I also have to place the text PRIOR to the menu in the code; or else it'll show up below the main menu (which shouldn't be normal behavior - it should sit against the other div!
I know I can set a width and float the text RIGHT - but it's been requested that the page resize with the browser page.
I know it's something stupid and simple that I'm overlooking...but I can't see it. Any help would be hot! Thanks in advance.
HI now give to the margin-left:190px; in your float right div
as like this
<div style="float:right;margin-left:190px;">
result is
this
also, remember the box model. It's generally a good idea to give a width to a floated element when it's more structure related, as this is, versus just an image. That will also help side-step issues in IE 7 and 8.
Solution was just me being dumb. I forgot to add a float to the menu. D'oh!
Related
I know this question was asked at least once before and I have read the other answers. They helped me bypass this problem (there are at least two tricks for this), but what I am asking here is why do I have this problem in my particular setup.
My website is here: webpage
Scroll towards the bottom and you'll see a div (class "two_third") with tabbed content (it has gray background, you won't miss it). The titles of the three tabs are links (<a> elements), but they're no longer clickable. The problem disappears when I remove "float:left" from the div that's immediately to the right (the one with the title "Package content", class "one_third").
What I suspect so far is that "one_third" overlaps with and adds some form of layer over "two-third", thus making links inside "two_third" become unclickable. But this is totally speculation and I have no idea why there would be any overlap, since there's enough space for the two divs to live side by side without any conflicts.
Kindly appreciate your suggestions
You have a DIV <div class="horizotal_break clearfix"></div>. That is on top of the two_third DIV. You can't select text from two_third either. If you remove position:relative; from #content .horizotal_break it should be working fine.
So I have a case of client-itus here. The client is whining and my boss is demanding that I add a logo underneath the Archives tab over the banner ad seen, which would break through the structure I've set up. We're two days from launch and I have a choice of either taking precious time away from other work to restructure the layout, or find a way to position that logo without having to futz with the divs. I understand HTML and basic CSS, so I thought I'd see if I could find a better solution before going about this the hard way. Thank you for all your help! The current page can be seen at ctdailydose.com/new
(Just for clarity, what I want to do is add big circular logo on the right that says "Scolari Engineering" without having to rewrite the CSS and change the header's entire structure.)
Just add your image (logo) at the end of the end of the achor in your menu-banner div and position:absolute right:0px top:0px for it in your css. Adjust the position as needed.
I was able to get three div's in a row, no sweat. Where the problem lies when the site is done some pages have text in the center column, however when i start typing the text spills over into the other divs..... The text doesn't wrap (stay in that div)
I'm sure I am probably missing one little dumb thing but any help would be greatly appreciated!
I uploaded a test of it for you guys to see:
http://graves-incorporated.com/test_sites/solera_new/test3col.html
and with the text spilling onto the next div:
http://graves-incorporated.com/test_sites/solera_new/test3col_2.html
I think you worry about nothing. Words like
Stufffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdddddddddddddddddddddddddddddfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
are not found in many languages. You will see if you put normal language in your div, the text will not overflow at all
You could always use CSS's word-wrap CSS Word-Wrap example.
Or PHP's wordwrap() function PHP Word-Wrap example.
There are various ways you can approach it, but that should set you off in the right direction :)
I Think you must use a proper language then it will not go out of Div's Width , Becase your DIV is already in a Fixed Width.Just use another the good words instead of stuuuuuuuuuuuufffffffff. It will work fine then :).
overflow: hidden will help prevent it from breaking the layout, although some content may be hidden. I would suggest word-break: break-all, but that has a tendancy to break words unnecesarily.
i'm having a very strange problem with the wordpress template.
i'd like to place 2 divs besides each other like this:
<div style='float:left;'>
left div
</div>
<div style='float:right'>
right div
</div>
normally this works as it should - both divs should stick directly to each other -
but something in the style.css (which uses css reset) causes the right div to overlap the left div with ~ 5pixels.
i searched the whole .css for it but couldn't find out :((
it's just a fact that it must be something with the default css.
anyone knows what is causing this - some fix?
thanks
Do either of your divs have widths? Give them a width, float BOTH left and add margin-right to the first div.
Make sure your width + margin doesn't add up to more than the surrounding div. For example if your surrounding div is 600px your boxes shouldn't be more than width:290px; a margin-left:20px; on the left div.
Also, you can use Firebug or any other web development broswer tool to check to see what styles in your stylesheet/s are affecting your divs.
Float both left or use inline-block. You can also just float the first one left.
I would highly recommend that you (if you don't already have it) download FireFox and install the Web Developer Toolbar plugin. This plugin is GREAT for tracking down problems like this. Under the CSS portion of this toolbar when you're viewing the page with the issue you can select to "View Style Information". Then just click on the divs that are the issue on the page. Off to the left you should see a little window pop up that shows all the styling that is affecting those divs and what css source they are coming from. With CSS if you rely on "bug" fixes to fix things that aren't really bugs then you'll just cause more headache later on in most cases.
I think the problem is probably with parts further on in your code. May I suggest clearing the floats:
Html:
<div class="clear"></div>
CSS:
.clear {
clear: both;
}
The code you have posted would work fine, but I expect you have more divs or containers or something somewhere which is messing it up.
Total width = margin_width + border_width + padding_width+ width of the box + (the same for the other box).
Make sure you have width defined for both floating device. The best way is to debug the code by hitting F12. You can do it FireFox, IE,Chrome or Safari but usually you have to enable this option yourself.
I'm having a couple of problems with this site. Actually it's my lack of CSS skills that is the major issue.
In any case, if you go to this page: http://winteradagency.com/Arvin/lifestyle/lifestyle.htm,
you'll see that in the center area <div id="centerInc">, I want some text (aligned to the right and bottom) to be on top of the image . So I've used a <p class="centerAlign3"> and another one <p class="centerAlign2">. It all comes out fine in Firefox and the others but not on IE6 or IE7.
Also the background image that is set to take up the entire browser window looks good in Firefox and the others but stops short on the right in IE6 and IE7.
I think I'm getting confused about the absolute vs float positioning among other things.
Any help would be greatly appreciated, I'm smelling rubber as these wheels are spinning.
Sorry, I opened the website in IE now, just add a simple left:0; to both of the text elements(centerAlign2, and centerAlign3) and it will work
Set position relative
(position:relative;) to the element containing the image, and
position absolute
(position:absolute;) to the text and also add (bottom:20px;
right:20px;) this represents the
spacing of the text inside the image.
You can use any value that you want, I
used 20px.