I hope I will explain this well.
I have a div that has a style="float: right;" and in this div I have a table with some editor fields.
But now I would like to have two text editor boxes (in .NET MVC3 #Html.TextAreaFor) that would sit under these edit fields.
But what happens is that the text editor boxes appear somewhere in the middle of the page and not under the right floated editor fields.
How do I make the text editors appear under the right floated editor fields?
Thank you
Try to apply overflow:hidden to the parent of the div with float right, assuming that the blocks that have to be below it are not in the same parent. But it sure would help to see your markup.
I have solved this by putting the right aligned div in the right cell of a two cell, one row table that I gave 100% width.
That forces the next view with text editor fields fit under this table because it is 100% in width.
It is not very elegant but it does the trick for now.
Thank you
Related
Is it possible in CSS only to accomplish to get a input field and button vertically aligned like in my pen:
http://codepen.io/rpkoller/pen/BhKbp/
and then manage that the button aligned to the right has a fixed width and margin to the left to the input field and that the input field is filling the rest of the space fluidly.
Getting the button to the right might work with a float but with that solution the button isn't vertical aligned in the middle anymore. :( and getting the input field fill the remaining space i haven't managed at all. :/
Best regards Ralf
You can use specifity of floatting element and layout of block elements .
<button> first in the flow, floatting before a block wrapping the input. wrapper at overflow:hidden and <input/> at width:100%;.
see test : http://codepen.io/anon/pen/Hdiyq
In the normal prestashop theme, there is a box at the top of the category pages for a description of the category as a whole. The box has an outline and contains a picture and some text.
The text is normally below the image, so the block takes up a lot of room. I would like to float the image to the left, and wrap the text around it, so it's smaller.
I suspected this would be easy, because the image and text are in divs, and both of them are in another div for the outline. So I simply added float:left to the image's DIV.
The image moved to the right OK, and the text flowed too. However, the surrounding DIV did not resize properly, so the image now runs right out of the box.
How do I get the enclosing DIV to resize properly?
You need to force the containing div to wrap the floated contents. You can do this a few ways, one being to add overflow:hidden.
.content_scene_cat {overflow:hidden;}
I'll try to simplify my problem to make it easier to understand.
I want to be able to add lines of text (using javascript) to the document at the bottom of the page.
When a new line is pushed, it's added at the bottom, pushing all the previous lines up.
The document should be padded and when the content overflows the older lines (top ones) should be hidden or using scroll in which case it should be scrolled to the bottom.
I've been trying to accomplish this for a while now but I can't any elegant solutions.
Any ideas? css3 is more than welcomed.
Thanks.
There is an HTML element do this by default it is UL just include it inside an fixed height div with overflow and some focus on the last LI!
I have two questions:
1) I have a div with an image that I use for my footer, but I when I resize the page the footer text gets all "mushed" together. Is there any way I can get the text to stay in a certain position and resize with the page?
2) I use a div for the body of the page, but when I try to add text and align it in position it moves the entire div. How can I get the div (which is just background color) to stay in place while I move the text around?
Here is the site and code on jsfiddle: http://jsfiddle.net/HzwV9/embedded/result/
Thanks.
Had a fiddle with your fiddle, here's a result that may help you: http://jsfiddle.net/HzwV9/4/
Some things I noticed:
A few of your HTML tags aren't closed (that's asking for trouble).
No need to use <h1> for your lower links; it's a block element, not an inline element, and also you'll need <a> to make a link later anyway
You can simplify the big list of tags at the beginning by just using * - all!
Hope this helps. Also, footers are notoriously difficult, since CSS doesn't do vertical sizing very well...there's a few solutions out there but they all have something wrong, up to you what you want to be wrong :)
http://earldev.tumblr.com/
I am making a theme that uses a script that lets the div scroll on mouseover. The images work find but any text posts will float below the other text post. I tried float:left, float:right, clear:right, clear:both, display:inline, pretty much anything. Help?
You need to specify a width to the divs and then float it to any of the sides, if you don't specify a width, the it will take the whole 100% of the size, thus sending the next one to the bottom!
Hope I can help!
It's not a CSS issue, you have your elements nested incorrectly. For the text entries, you're closing the divs of class textt but not the divs of class posts, so the second text entry is in the first, and the third is in the second.