I'm trying to eliminate white space below a division which I am floating to the right.
My intent is to define a division which I can place anywhere on a page and have it float to the right. A button will expand the division - increase it's height and width - to allow the division to be read. I've left out all of that processing to simplify the examples.
I've got it floating right - - it was simple to do, just code float: right; using CSS. The problem is that if I do not specify a height for the division, I get extra white space below the division. If I set the height so that there is no white space under the division, the button extends below the division's border.
Go to http://www.bobnovell.com/sideboxproblem.html for a page with examples.
Bob
You got the space, because the div with floating right is more height than one line of text. So it takes two lines.
If the div should stay on his on line, wrap the text in a new div and set clear=both on it.
Here is an example: http://jsbin.com/hujax/1/
Update follow the conversation in comments:
If you do not want change the markup, you could use position:ablsolute on your div and position it with top:1em (or what ever you want) and right:0.
Also the container of the text and headline need the style: position:relative.
here is and example: http://jsbin.com/hujax/4/
update
with negative margin-bottom you can reduce the needed height of your div.
http://jsbin.com/hujax/3/
Related
There is a container that accommodates four left-floating divs, width of each of them is set to 50% (two in a row). Besides, I added a top-margin value for every div but the first (by means of this owl-like selector * + *).
Inasmuch as the first div has less text inside itself than the second, it is possible their heights result in different values (the first would smaller). In this case, to my expectations, the third div will find its place right beneath the first one, with only its top-margin preventing it to touch the first. Instead, I found this picture:
Apparently, the third div comes up to the second one' vertical level. Could anybody elaborate on this rule? Why is not the third div lifted up as much high as it is possible to it (to the first div)?
JSFiddle
The logic of float:left layout is - place to the right of preceding left floats if there's space or underneath them if there isn't. Not - fill in the first space big enough for the box.
Exactly why is not obvious. I suspect it was just both sufficient for the target use cases and simple enough to implement at the time it was specified.
Kind of a confusing request to phrase. But basically I'd like to have a border around content that has some text centered on the top middle of the border, without having the border strike through the text. Please see the attached image. Also, I will edit to provide my code if you deem it necessary.
Thanks!
Here you go:
https://jsfiddle.net/4nhk3ooy/1/
You put your header inside the box and then put it position:absolute with correct offset. Then you set the background of header to correct color. Also put some padding to it, so there is some space between border and text. Then you just have to correctly count the offset. Also take in mind, that for some responsive features, you might want to write some JS algorithm to count everything depending on size of screen (because you will have to handle text size, after that alter header width, after that alter header padding and after that take all this and calculate correct offset)
And also take note, that the bordered box has to be also positioned, relative, absolute or fixed, or your absolutely positioned header will not be positioned against the div, but against the screen.
Having problems executing a complex layout with minimal usage of relative and absolute positioning.
Here's my layout:
All my elements are floating left sitting side by side with only a single problem: the border img needs to bleed down into the next row. How can I do that while preventing the elements in the 2nd row (the CTA elements) from scooting down below the lower margin of border img?
This is what happens if I set the height of border img
For clarification:
The dom is such that border img is between main_sidebar and CTA_top_container.
main_side_image
main_heading_container
main_sidebar
border_img
CTA_top_container
CTA_Button_relative
Closing thoughts:
I have some ideas, like floating right the border img as a div (or susy's last) and setting background-image as 60% width and positioned on the left of the div or nesting an absolute positioned img inside of a relative container to nudge it over to the left, but i am afraid of destroying the fluidity of the layout (it's inside of a susy fluid grid).
Any thoughts?
If you float the border_img right instead of left (with some right margin to push it off the edge), everything else should be able to flow around it.
You might also want to use a grid with more columns. If you're always having to split columns into fractions, it's not really the right grid for the job.
This is the page: propertytest.uphero.com
I have narrowed down the problem to the 6 blueish boxes (the top 3 are under a div called offers and the 3 below that are under a div called properties). If I was to take them out, the space goes but I would really like to keep them in so I need someone to help me troubleshoot it so that I can keep the boxes and have no space below the footer.
I think my problem lies with the fact they are positioned with relative (all divs are positioned relative - bad idea I now realize that).
I have tried:
aligning the 2 divs with absolute positioning - that does the trick of getting rid of the space at the bottom/right however if I was to scale down the browser, the boxes go out of position..
removing all positioning and floating them to the left/right - removes the space at the bottom/right but doesn't go into the position I would like them to ( I don't think you can position floats with top/bottom/left/right or margin? )
Here is how to sort out the 6 boxes that you currently have as position:relative;
http://jsfiddle.net/F9Q6T/
The basic premise is that you float the boxes inside a container and then clearfix them to make the container the right size.
In terms of the issue at the bottom of the page you need to remove bottom:290px; from your footer. This appears to be what is causing the problem
I think main problem is body background image. You have used image of 1300px * 1000px size. i think you must use image of 1px width with repeat property.. And white space at bottom come due to bottom property of orders and properties div`
thanks.
I am trying to create a site layout using CSS. I have four (4) DIV elements. One is the main container that I have centered in the page and contains all the other DIV elements. Of the remaining three DIVs one is a page header, one is a left menu and the last holds content for the page. I would like to have the CONTENT DIV floated such that it is adjacent to the MENU DIV. However, I am finding that the width of the CONTENT DIV is not using the width I specified. I have created a sample running on JSFIDDLE which should make it easier to visualize.
http://jsfiddle.net/Rrgr7/
What I am trying to figure out is why the CONTENT DIV doesn't take up 600 pixels as I have defined? Thank you.
You have to float your content also. Your content div is 600 from the left not counting the float and if you add more text it will run down under the menu: example.
If you float it, then it will do what you want, but you have to be careful about sizes or it will float down under your menu.
If you just give it a 200px margin and no width, I think that would work best as it would use the remaining space and stay 200px from the left edge. The float doesn't push it further, the margin is from the container div.