in the footer widget on a wordpress page, the join now button is going out of alignment when looking with responsive viewing on mobile. the code is: join now
how do i fix this so it lines up correctly? it's at https://time2track.com/ in the footer
I have looked at the code but do not know how to make this line up correctly
I just did a quick look at your website, it seems like you are using "float: left" on the div that contains 2 links before your "Join Now" button. Just use "clear: both" on the div after the floated div. In your case on div with id "custom_html-2".
Also, it would be beneficial to read this article: All about floats
Please provide code sample next time, as that would be the easiest way to seek answers.
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.
I absolutly know that you will downvote this question, but I cannot repeat this problem in jsfiddle or with custom html, so I can only show it using webpage.
If I understand the problem, I will update question with appropriate html code.
If you visit website http://tax.allfaces.lv/, you will see three menu items. If you click on first or third menu item (Home and Contact US), then everything is fine.
Merchants contains submenu. It is not so obvious, but if you click on second one (Merchants), then you see that the whole content is moved some pixels to the right comparing with Home and Contact Us page. If you just click "Home" and "Merchants" one by one, you can see that for "Merchants" all content is some pixels to the right.
EDIT:
This is related to webpage height and scrollbar.
Add this code to your body to keep the scroll bar all the time to avoid this issue
body {
overflow-y: scroll;
}
It's because the scrollbar disappears because all of the content fits in the page :)
its because the scrollbar on the side dispears ;)
what you could do is show the scrollbar at everypage so it doesnt move.
...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!
I have menu that is implemented with html and css.
On mouseover of main menu, I have to show all submenus in one place.
Here is an example click here jsfiddle
For this, the submenus alignement is not proper.
According to the example, Test 5 has to come under Test 2 but, it's showing blank space.
How can I align this properly?
Note:: The Submenu items will be dynamic, they may grow or shrink.
Unfortunately, it is not possible with your current markup: if Test5 had to go below Test2, then how would you automatically tell it not to go below Test1? What should the rule be? There's no obvious answer to your question: if you need elements of different size to layout in a space efficient manner, without too much blank space, etc, you could write some kind of layout manager with jQuery that will structure and re-position your menus according to their content.
The problem is your submenus are floating left and Test 5 is getting hung up on Test 3 because it is longer than Test 4.
You can test this by adding a CSS rule to set the submenus to have the same height.
ul .sub.sub10 ul{
height:180px;
}
Link to updated jFiddle
Ok, please look at my problem:
http://phone7forum.com/viewforum.php?f=2
http://phone7forum.com/viewtopic.php?f=2&t=4
I've been editing a phpBB forum and adding in all of my css customizations and I've gotten pretty far along, but you can see in the 2 pages above the problem I'm faced with. My custom "main content" box starts out fine at first and sits exactly where i want it to at the top middle of the page, but when i stick the actual phpBB "forum code" inside it, the forum content will start where my left sidebar ends (way down at the bottom of the page).
My website is a "fluid width" website. The "left sidebar" is floated to the left, has a width of 300px, and height 100%. The "main content" has a left margin of 345px to push it past the sidebar so it will sit to the right of it. So thats my setup and it seemed to be working perfectly fine for me until i started adding in "forum content". Does anyone have any idea on how to fix? Do you guys think that the problem exists in the forum's existing css/markup or is it a problem that I've created in the way I've layed out my website?
Here are screen shots of what my problem is (if for some reason you see something else in your browser):
http://phone7forum.com/images/1st_page_wrong.jpg
http://phone7forum.com/images/2nd_page_wrong.jpg
Here's how they should look, or what I'm trying to do (compliments of photoshop):
http://phone7forum.com/images/1st_page_right.jpg
http://phone7forum.com/images/2nd_page_right.jpg
I'm desperate for help! Thanks guys for looking!!
Your content div dosen't float left. Can you just add float: left and remove the left margin?
update
Muhaahaa, I found it:
html body#phpbb.section-viewforum div#main_wrap div#content div#content2 div#mybox_wrapper div#mybox-wrapper-content div#mybox-wrapper-content-inner div.forumbg div.inner span.corners-bottom
has a clearing. Remove it and all will be fine. :D