http://elastichosts.darkgreener.com/cloud-support/index.html
Please could anyone explain why the table (#support-table) is being pushed down to align with 'Submit a ticket', rather than following straight on from the first paragraph?
I don't understand why the table is being pushed down, but the header and paragraph are displaying just fine inline alongside the right-hand gray block.
I assume it must be something to do with the display property of the table - I've tried setting it to display:inline, but it doesn't seem to help.
Thanks.
It's because of float: left in extra.css line 135. Remove that or change it to float: none and it scoots up to the paragraph.
You're unnecessarily floating your table left. (float:left;)
Removing this property will restore the table to the right location.
As the other answers pointed out, you have the float: left. The reason that this was causing problems is because of the clear:right that you have on the button to the right. The button is cleared to the right and the flow of the document continues fromt that point and so the table is floated to the left even with that button.
Related
I'm always stuck when it comes to float. In my grid project, I want to have my buttons in the left and my table in the middle, like in the shown example. And my footer should be bottom but i don't know for what reason is not https://codepen.io/coderBoyNaN/pen/wprOMX. Can anyone help? Exemple of how it should look like, i wanna make it more responsive: https://codepen.io/Soheevich/pen/VybrOo.
Just erase float: left from div#menu
https://codepen.io/anon/pen/zpEXdP
I'm a beginner with HTML and CSS, and I'm making a site for a friend. On this page http://mypersonalcredo.com/categories.php I can't get that last "Coming Soon" photo to shift up into the row above. I'm sure it's a simple fix, but I just can't seem to figure it out. Any help would be great and thank you!
Very easy fix: replace float:left; with display:inline-block; on your category class.
You may want to use vertical-align:top; as well to align the upper sides of all pictures.
Just remove the <br> after the "Wear What You Believe In!" text. inside .catdesc related to the t-shirt div.
It should fix it.
To see what is causing the issue you can open the developer console and then inspect the "Wear What You Believe In!" text . Remove the <br> element selecting it and pressing the DELETE button.
It works if you add:
clear: left;
to the ones that are stuck on the right and they will go to the far left underneath. I added it to that div for the "Cards". Check out the screenshot below:
It also may help for you to read more about using clears and floats.
Check out this article: https://css-tricks.com/all-about-floats/
This is because your image with the shirt is to large with the extra text undeneath and is making the floating elements push each other down. See image for example. To fix you will have to make it take up equal amount of space as the other category elements
Trying to have the label.error to show under the select element. I keep trying a bunch of things with float but I'm obviously missing the point.
Here is the fiddle
http://jsfiddle.net/ALUQB/5/ Press the "Change timezone" button and see it shows inline. I want it underneath the select.
Below is a possible solution (notice the extra div element):
http://jsfiddle.net/ALUQB/7/
Adjust the left and bottom properties as needed
Something like http://jsfiddle.net/ALUQB/8/ will work, but if there's another item after it this will cause issues. Fine for the fiddle, at least.
All I've done is absolutely positioned it, banked left, and with a top margin to nudge it down a bit.
Edit: Beaten to the punchline by a few seconds. Either of these solutions will work, neither is particularly ideal/flexible.
I have a newsfeed/chat box. Each entry contains two spans: #user and #message. I would like #user to float left, and #message to float left upon it. If #message causes the row to exceed the container width, #message should wrap below #user, as shown in the diagram below.
By default #message jumps completely beneath #user if it does not fit on the same row.
I have tried whitespace:nowrap on each element but that doesn't seem to do the trick either.
Help?
Maybe I'm missing something, but if both elements are display:inline this should solve the problem of #message going completely beneath #user. No need to float anything.
Demo (not much to see): http://jsfiddle.net/YK3R9/
Feel free to use semantic markup instead of spans and divs, I just used them for the demo.
If you need the border on message to display the way it is in your drawing, just say so. I wasn't sure if it was a visual aid or the way you actually want it rendered. Simply adding the border to the element looks a bit weird when the message spans multiple lines, so we might need a helper span.
EDIT: Saw your note that borders don't matter.
Moral of the story: No need for float here.
I have a box where user activity will be inside.
Now I am having two issues.
The first one is that i have a float left element, and when this ends the text also goes at left. (issue1)
The second is that if you type in a non-breaking word/sentence, like eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee it wont break it and go under, but allows it going to the right, like it do not listen to the width specified.
Here is live of both issues:
http://jsfiddle.net/AB4Ls/5/
Help please, how can I solve this, and why is this happening?
For first issue set element that contains text to be displayed as block and give it left-margin amount of floated element width.
display: block;
margin-left: 40px; /* adjust to your needs */
For second issue check this url: http://perishablepress.com/press/2010/06/01/wrapping-content/
Explanation is to long to repeat it here.
Are you sure it is possible you have such long words?
If true you can use css3 property word-wrap or parse words with php before displaying it.
I think you're saying that you want the text in the issue 1 to NOT flow back under your image that you've floated to the left.
If so, just surround the text with a div tag and use display: table-cell. This will put a "rigid border" if you will, around your text.