I know this is very simple, but i've been struggling for a while and I just can't make it work. I thought someone here might be able to give me a quick answer.
I'm trying to make a div float and align with another div. I'm trying by changing the float and display css attributes but with no luck.
I've set up a jsFiddle: jsFiddle
Thanks in advance
Here: jsfiddle
I just changed the height of the div for the example to appear better but you can set it back to your heights for your site.
I'd set the margin-top on the whole container div so that you only define that property once instead of setting it for both the menu and the content separately: anytime you're defining a value twice, you should try to put a wrapper and define it only once.
Your code works well if the screen is wide enough. Only if it's not the #content gets pushed under the submenu. To fix that give your #container a width that can accomodate both - http://jsfiddle.net/zaRqz/11/
#container {
width: 1040px;
overflow: hidden;
}
Related
I'm trying to center an absolute div and at the same time also set the width of this div, but apparently only one these two things is possible at the same time. I've managed to center the absolute div rather painlessly, but setting a min-width adds this useless horizontal scrollbar for no reason: https://jsfiddle.net/pietertje1/ze7472ge/
The weird thing is, if I stretch the div to its desired width by adding in a single line of characters, it behaves perfectly.
anyone any idea how to fix this?
It looks like your min-width rule is causing this. Expand your fiddle output window and you'll see it go away. If you need that min-width you can target elements and apply overflow rules to them. For example
body {
overflow-x: hidden;
}
JSFiddle Link - your example with this rule
Edit
Per discussion, if you simply wish to center an element, apply the following margin rule
margin : 0 auto;
Updated JSFiddle
I have been searching for the answer to this question for a while now but here is my issue.
I am trying to create a div that hugs the left side of the browser window and when it is hovered over, it will expand and hold more divs/text.
My question is, how do I make it so when the expanding div covers text, it does not move it, also how to make it so the text within the expanding div shrinks/grows with the div.
I have tried
position: relative
position: absolute
and all
text-align
possibilities
Here is my JSFiddle
Any help would be greatly appreciated! (Sorry if this question has been posted/answered in the past)
Updated fiddle: http://jsfiddle.net/nqm9ksv8/
Moving text below
Try absolute positioning for your .grow:
position: absolute;
That way, it'll not get into the way of other elements, instead be drawn on top of them.
Shrinking text inside
To keep the text inside from shrinking, add another div inside, which has already the desired, fixed width. Add overflow: hidden; to the .grow container. That way, the contents will be layouted, but what does not fit the container is not being displayed.
Just use min-width to prevent div from resizing.
.Site-Content-Container{min-width: 960px;}
Edited: or maybe not. position: absolute; is an option. To be honest, it is not clear which text is not meant to resize.
change your "float:left;" in .grow to "position:absolute;"
is that what you are aiming for?
I'm currently working on a webpage.
Basically it's two sections. The main section is taking up all of the screen that the sidebar on the right isn't. The sidebar is fixed and set to 250px wide. The main section is set to 100% width with a margin-right of 250px.
Now I put down a few test blocks to see how it would look, they're 300px x 300px. As you can see, the last block on the top row goes behind the sidebar.
How can I make it go to the next line instead of going behind the sidebar?
Thanks in Advance.
The reason the block is not wrapping is because it is ignoring the margin right.
Without the CSS it is difficult to give an exact solution, but I would suggest a simple solution would be to float the side bar right and the main div left. Then you must remove the margin right on the main div.
This will allow you to keep your fixed pixel size, although using percentage in most causes is more suitable. I hope that helps.
Maybe the reason is width: 100% for the main section?
.main {
width: auto;
margin-left: 250px;
}
From the understanding of your screenshot, I assume you should add "Position" tag to determine the priority of the div and i suggest you to use % instead of px in nested div tags.
Struggling a bit with HTML positioning. I'm sure it's a pretty simple problem, but just can't crack it.
Please see fiddle: http://jsfiddle.net/HMyXW/2/
Basically, I am trying to position the yellow div (#logo) above everything else, so it will push any other content on the page down, even if the screen is resized vertically.
I've tried messing with z-positions, etc. but am not having much luck.
I suggest remove all the fixed positions if it is not necessary and add a outer div to wrap all the child divs.
Check this DEMO
If it is necessary to use the position:fixed to the #logo then you need to check the height of the #logo and give the same value as margin-top to the content div.
Your #logo has position: fixed; which means the element is removed from the normal page flow.
I have a container with a height of 100% so the height will be dynamically changed to text inside the container.
anyway, the container have a background with a custom image (using background-image).
now, when I create a < div id=blabla" > with { float:left; width: 100px; height:100%; }, the background which defined in my container doesnt show on the div.
but if I remove the float:left, the background does shows up
any ideas what the problem could be ?
To fix this, add the following as you mention to the container element.
overflow: hidden;
If you are still seeing this issue in IE6/7, you will need to enforce hasLayout, this is done by adding this to the container element.
zoom: 1;
Hope the IE6/7 addition helps you out.
It's a little unclear from your question but I'm assuming the floated div is a separate div inside of the container div? By default a floated item is not "contained" by the container. This is just the way floats are supposed to behave. If you put "overflow:auto;" on the container div then you will generally get the behavior you desire, but read a more thorough discussion of the topic here: http://www.ejeliot.com/blog/59
I made it.
The solution was to add
overflow:hidden;
to the container div.