Firstly, I'd like to say that I don't want to do this with Javascript.
http://jsfiddle.net/WqrBY/2/
In this jsFiddle, I've got two columns but the bottom right div is obviously aligned with the bottom left. I'd like to be able to (without adjusting the markup) move the bottom right div just under the top right (just like how the bottom left is under the top left).
I don't want to change the markup because the order of the divs is important when it switches to a one-column layout for smaller screen sizes.
Can anyone help me out here?
I'm going to preface this with saying I'm not sure why this works... I'm going to keep fiddling to test it. Comments welcome.
Here's my fiddle
Edit:
I know that you specifically mentioned that you don't want to 'change' the markup because of the div ordering. Would you be open to adding to the markup? This shouldn't change the order of information, but it might be a simple fix to what you're trying to do: http://jsfiddle.net/tracyfu/WqrBY/7/
Related
I am learning some React from a course Maximilian Schwarzmuller created. It seems like some of the styles are not working. Tried to figure out why but I still don't have an idea.
Here is the code https://codesandbox.io/s/elastic-montalcini-3urgmm
Basically Max uses position fixed to stick the header to the top of the website, then he uses flexbox to align items and justify content - space-between to have the button on the right side of the site. He also sets up a padding to move button and h1 header closer to the centre.
If I remove padding it looks ok but then I need to find a way to make those items closer to centre. This becomes an issue.
I know that I can use some workaround but I would like to make it work as Max did. (Maybe he cheated :D )
I've been experimenting with bootstrap and I think it's great. However, I've come to an issue that I would love to be able to apply this style, but do not know how to properly do so. What I want is for a section to be split into 2 halves (side by side) - one section has text and content and the other has an image. I know how to achieve this with bootstrap using containers/rows/columns, but I want to remove the borders and margins from the second section so that the image I set in there will take up the full space. It is difficult for me to describe in writing exactly what I want to I have attached a screenshot to depict what I mean.
Please refer to the "OTHER EXPERTISE" and "AMAZING PORTFOLIO" sections in screenshot..
It sounds like all your trying to do is make that other section full width? In that case just set the container width to 100%
I'm having a problem achieving the layout for a website I'm designing.
There are three blue divs across the top of the page under which I have placed four red divs. Each of the red divs will take up just less than a quarter of the width of the page.
After putting an input field in the right most blue div the position of the red divs gets shifted to the right and some red divs appear below others.
I've tried changing the position properties on various divs but can't seem to restore the layout I wanted and have tried adding margins but to no avail.
Can anyone see the problem in my code and/or layout? Any help will be greatly appreciated, I've included all the code in a JSfiddle page.
Many thanks.
http://jsfiddle.net/4cb5za9y/
enter code here<style type="text/css">
There was simply a </div> missing after your input, which broke the layout. Here's the updated fiddle.
I'm learning HTML & CSS, and I'm having an issue.
My page is already built : a header, some blocks, a footer. Very simple, I'm a beginner.
I'd like the footer to stay fixed on the bottom until it reaches a limit situated 50px under the last block (if we scale the viewport). Then it should just stay there like a normal block... But I can't figure out how to make it happen!
Could you help me, please?
By the way, I speak French : if something isn't clear enough, please tell me and I'll try to explain.
Thank you in advance for your help,
Adrien.
There are many different ways to handle this with purely CSS.
Firstly Twitter Bootstrap has a nice means of doing this. Link is here
Or you could use the CSS Sticky Footer See here
The key is to create a negative bottom margin in the main container, using the exact height you want your footer to be.
I hope this helps.
JSFiddle
I'm creating an image gallery that, ideally, should have a column of thumbnails on the left with a larger image on the right with both sections aligned along the top vertical axis.
To do this, I've floated the thumbnails and larger image left and right, respectively, and tried every combination of clear:both and overflow:hidden I could think of to achieve the top alignment to no avail. Any ideas?
I've included a JSFiddle at the top and an image below to give an idea of what I'm going for.
Put div.large-image before div.thumbnail in your HTML.
I'm not exactly sure why this happens. This article briefly discusses it. The answer/reason is probably buried somewhere in the CSS float spec.
I wrote a cool simple JSFiddle to show how the gallery should be displayed, and how you can align the images.
You have to be careful with using this JSFiddle in your code because some of the elements you used in your question's JSFiddle have pre-specified properties like display:inline-block or other things that might need to be overridden in CSS for the gallery elements. This is also for browser-compatibility.