HTML
<img id="btnLeft" src="img/btnLeft.png"/>
<img id="logo01" src="img/logo01.png"/>
CSS
#btnLeft{heigth:64px;}
#btnLeft:hover{height:74px;}
On mouseover btnLeft pushes #logo01 down by 10px.
I want #logo01 to stay in place.
Create a separate div for your image elements, float them left or right depending on your preference and then use use vertical-align: top on the containing div. Here is an example: http://jsfiddle.net/94zVg/.
The reason for this issue is because you have to image elements side by side which will be aligned to the bottom of their containing block. When one image is enlargened, it expands the containing block and the other element descends to stick to the bottom of it. Floating and aligning vertically solve this problem.
Give the first image a width as well, otherwise its width will expand proportionally and push the adjacent image down.
#btnLeft{height:64px;width:100px;}
#btnLeft:hover{height:74px;}
Here is a demonstration with explicit width: http://jsfiddle.net/XRKK4/
Here is a demonstration without explicit width: http://jsfiddle.net/XRKK4/1/
Related
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.
Im making a responsive site with dynamic content. I have a row of divs that will wrap at smaller screen widths. As some of the divs have more content and are taller than others, when a div wraps it doenst always go all the way to the left of the screen.
http://codepen.io/anon/pen/Ljmkb
I need a solution that works for different screen widths and for when the content makes the divs different heights, in other works I cant just set clear left on the 4th div.
Change float:left on your div elements to display:inline-block; in laymans terms this will place them on the same line if there is space, or start a new line and place the overflowed element at the start of it if not.
By then placing the elements in a vertical-align:top environment, they will maintain their top alignment.
Demo Fiddle
I'm working on a simple design here, but i have a little issue.
Please have a look at the final design example here: http://ronnieaarebrot.com/demo/cms/
On the menu to the left and right, you can see a small border going from the top to the bottom (following the height of the center content).
How can i do this? i was planning on having a background-image with the small border on both sides, but how should i "calculate" the height of the center content? or make the two borders follow the height of the center div. This is a bit hard to explain.. but check the image and here is an html example of how far I've come. http://ronnieaarebrot.com/demo/cms_html/
Any good solutions?
The easiest way would be to contain the centre content in a div element and use the border CSS property to apply it. You can then adjust padding and margins to butt the centre and side elements against one another. Given the model, it seems like some padding on the centre element combined with almost no margins on the sides would do the trick.
If you put overflow:hidden on the #page_wrap element that it will extent to the height of its contents (the left, center and right parts).
So you can put the backgorund image (1px height repeated vertically) on that element and be sure that it will extend all the way down..
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.
Im trying to make this layout (many of these are in a list):
An image (of varying height, but a set width) on the left. To the right is an <h2>, and below that, but still to the right of the image is a div with other content in it.
The div is used to provide a different colored background. Right now, the div for some reason extends behind the image, and the images has a varying distance between them, and sometimes one element will get pushed to the right by the height of the image above.
http://jsfiddle.net/RQsUc/
Add overflow: hidden to your outermost divs (div (display: block)) to contain the floats.