I need two divs side by side with the one on the right always stretched to 100%. The one on the left is not always going to be there and contains an image of 128px width & height. Inside the div on the right is a table that is 100% width. Can this be done? Does anyone know how to do this?
Here is a jsfiddle that (I think) solves your problem. Next time some code would be helpful so we have a place to start.
The trick is to use absolute positioning in the div on the right side to make it "stretch." Note that the parent cannot have static positioning.
EDIT: If the image is not always there, you might need some logic when using this technique. Remove/add a class in JavaScript or something to make .child2 have left: 0px;. Not sure what technologies you're using.
EDIT2: Here is a link to an article that discusses the technique, as well as other situations where it's useful.
Related
CSs for rate box:
.rating-input {
font-size: 25px;
position:relative;
left:101%;
}
Button:
.custom-input-button {
text-align: center;
position:absolute;
left:64.4%;
top:12.1%;
}
image :
<img src="https://graph.facebook.com/<?php echo $user_id; ?>/picture?type=large"
style ="position:relative; top:-46px; left:0px;"/>
It gives different look in chrome and firefox:
Firefox:
In chrome bookmark menu is not open. The change in spacing is due to that?
I am frustrated changing the positions, but problem does not solved.
I agree that your not giving us enough code to really give you a good response to.
If this helps at all, when I do custom form boxes as such, I wrap them in a div to start off with. Then define my widths/heights, and do a left float. This might be a deprecated method, and there may be a better way to do it, but this has always worked for me so I still tend to do it.
That should keep your elements all at the top, then you could do a clear:both, and float your rating system to the right? Just an idea.
Just to sum up conversation in comments.
You could make resizable containers with width in %. That will make your site adjustable to screen resolutions. Make it for minimum resolution of 15" display (1024px in width). Then position elements inside those containers. You can wrap them in another node of wrappers. More wrapper divs - the less can go wrong. But you don't want them too many, ofcourse. It depends on structure of your site. Then you can set margins and size of elements in px inside those containers.
Quick example of what babbling about in upper paragraph
jsfiddle.net/Driveash/qgbLB
You can also make extra css for specific browser.
Are left and margin-left the same?
Left and margin-left could do the same thing but they are not the same. Left is for positioned element (as absolute, relative, fixed). If you don't have positioned element then you want to use margin-left.
add z-index:-999; to the image so it doesn't sit in front of the green banner
The title says pretty much everything. I have a wrapper div with two divs floated side by side in it. The contents and its length in both divs varies. The problem is, that I need the wrapper div to stretch only with the right div. The left div should have scrollbar, if its length exceeds the length of the right div.
One person in IRC already claimed it's impossible to do, but I refuse to believe him. CSS3 and/or HTML5 are completely acceptable since the whole site is wrote with them already.
Thanks in advance, if someone knows an answer.
Here is a fiddle I made which should accomplish what you're asking for:
http://jsfiddle.net/zftXu/1/
Just keep in mind that since the size of the right div is dynamic, if its contents become too large (off the screen), the right div will move to a row below it. If you wish to prevent this, then put an overflow and max width on the wrapper, like this:
http://jsfiddle.net/zftXu/3/
I know this is a common question and I've already tried the searched methods. Here is the jsfiddle: http://jsfiddle.net/ZfZK9/ and here's my problem
Basically, I've got a main div container. It has an image and some text. I need the image on one side, then the text on the other. I tried putting the img in a div, setting it's height to 100%, and floating it right, but as you can see in the jsfiddle once the text goes below the image it doesn't keep the column formation.
I'm not sure why the display: block and height: 100% aren't doing any good on the left column.
Thanks
Edit: I'm assuming height: 100% doesn't work because that gets rendered and then text gets added later. I'm still trying to find an elegant solution though, and general-purpose.
Another problem, is when I set both divs (of the image and of the text) to float: left, it just displays the image then the text under it
It can be done like this: http://jsfiddle.net/ZfZK9/34/
Just create two div's as columns around both sides, then set both those sides to a specific width, then play around with the padding and margin til you get what you want.
To keep your border around your content, I added a clearfix which will help contain the two floated columns....
http://jsfiddle.net/ZfZK9/34/
Had to edit a few things, took a bit to get it right, but now all should be working. Contains two floated divs, with a browser proof clearfix added to the mix. If you wanted the image, or the sidebar to appear as if it continues to the bottom, read about Faux Columns
You have some css in the html and some in the css so this is hard to follow. What I believe I see is a common mistake where you must consider when you set something to 100% you have to think, 100% of what? It's always the parent of that element. So what is the parent set to? If nothing, there's your problem.
Just remember that if the parent is also set to 100%, the same question will apply.
EDIT: I see the problem now. I misunderstood. What you want to do then is set the width of the right div, the one with the text. Float that right and it should solve the problem.
I use example 3 given in this page:
http://simple-navigation-demo.andischacke.com/
and I have a problem because when I open the main page (for example)
http://simple-navigation-demo.andischacke.com/
I get an empty div on the left instead of the content div filling the whole area.
On the other hand when I open a page from the menu (for example)
http://simple-navigation-demo.andischacke.com/books
Everything is just fine.
Can someone propose a solution? How can I completely remove the div in CSS if it does not contain anything?
There are lots of solutions; it depends on where you want your logic to be. A pure CSS solution might be tricky; it might be easier to do this sort of thing in JS.
That said, try changing #sub_navigation's width property to be a max-width instead. This way, it can still be set to float:left, but when there's no ul element inside it, it can collapse.
You might need to modify the width of your content div after that, but hopefully this gets you on the right track.
I have been trying for 2 hours to get my footer to stay at the bottom.
I have been trying "Matthew James Taylors" technique, but no luck.
Anyone see what I am missing or doing wrong?
Here is a Live Example : http://glustik.com/essex/index.html
Any help would be GREAT!
I would attached the CSS Code with the { } but it always breaks for me.
I feel like the CSS to fix this will still be problematic, I would be tempted to rewrite the whole thing: HTML markup and CSS, otherwise I suspect there will be more trouble down the road.
Here are some things that are most likely giving you trouble:
Duplicate id values (as mentioned)
Unnecessary absolute positioning
Hard-coded height values on several divs
Unnecessary use of "clearfix" divs
Overuse of negative margins to compensate for padding on other elements (always problematic)
Minor but relevant: use of classes like floatRight, just as bad as using inline styles.
I think in general, instead of trying to control the positioning and height of everything - just let the normal content flow dictate it. Naturally, the last element in your markup (footer) should be on the bottom without all these over-thought restrictions.
Best of luck!
EDIT: Apparently I've come off as unhelpful, so I felt I should add a direct response: For a quick fix, to simply get the footer on the bottom:
Remove the height and bottom padding from #mainBody
(tested in FF4 and IE8). There will still be some padding issues within the footer, but that can be resolved in a number of ways depending on how you'd like to approach it. Once again, good luck with your project.
You have the footer positioned absolutely in #container, which is positioned relatively. therefore, its being positioned at the bottom of #container.
try moving it out of #container, or remove the relative positioning from #container
Because all of the content inside your main container (#mainBody) is floated, the container's only way to determine it's height is via the "height" property, which is set to 100px;. The footer is correctly rendering right below the 100 pixel height of the main container.
You have three options:
you can either properly clear your main container so that its height is dynamic based on its content using a clearfix like this
or you can set the height of the main container to something larger. I changed it to 700px and the footer rendered well below the main body.
or you can remove the height altogether, which will probably be the best solution in the long-run. Thanks to #Gaby aka G. Petrioli for pointing this out.
I've been doing this a long time and have never heard of this method. That doesn't make it bad, but the currently accepted version in my circles comes from Ryan Fait (http://ryanfait.com/resources/footer-stick-to-bottom-of-page/)
If you load this up in Chrome and disable the position:relative from the container it does properly glue the footer to the bottom of the page. That signals a problem to me, because it's contrary to what the tutorial says. Regardless, it accomplishes your goal.
You should take at least a look at Compass. It makes CSS so much easier. For your particular question, take a look at:
http://compass-style.org/reference/compass/layout/sticky_footer/
Make the following changes and it rendered fine in Chrome for me:
remove bottom:0; from #footer
change padding-bottom:167px; in #mainBody to the desired location (I used 455px and it looked pretty good)