http://216.194.172.101/~culinare/index.php/terms-conditions-and-policies
The problem I'm having is pretty clear. The DIV that shows the gray box with the T&C stretches beyond the parent DIV that contains it. I've tried a number of variations in the CSS, and none of it seems to work. What am I missing?
Floating elements doesn't affect the size of the parent element. You can however make the parent contains the floating elements also, by using the overflow style:
.body_content { overflow: hidden; }
As the parent element doesn't have a specific height, the overflow style won't actually hide anything, it will just have the effect on the floating elements inside it.
The div with the class .body_wrapper has left: right.
So you have to do the next:
.body_content {
/* other styles */
display: table;
}
Related
I have a div in my HTML page that has overflow-y: scroll;, and this appears to work just fine.
But when I add content to this scrollable child, my page's body increases in height such that now the whole page is scrollable. But scrolling the page down shows empty background-color space.
It's as if the body is allocating space for the content inside the scrollable child, despite the child being scrollable and thus not requiring the body to allocate this space.
Is there a style property that causes this, and is there a style property (or removal of a property) that can fix it?
EDIT:
As a clue, my scrollable child element has display: flex;, and when I change it to display: block;, the new position it has extends exactly to the bottom of the extra space the body has. So it's as if the body is behaving as if the child div has display: block;, ignoring the it's actual display value.
As i understand it, you have a child element inside of a parent element. You want the child element to be scrollable, but the parent element to not be. Is that right?
In many cases, only adding overflow-y: scroll; to the child element might not be enough.
Try adding overflow-y: hidden; to the parent element, and also set a max-height to your child element.
That should fix the issue.
Cheers :)
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar
Why when overflow:hidden is added in .navbar it works and without it the left side is white and the text is on the right side? Also, how and what is the purpose of applying overflow here when this is what I read about the attribute:
Note: The overflow property only works for block elements with a
specified height.
It's all because of block formatting context
If you remove overflow: hidden everything for that element appears on left because children elements have float property and there is no place where float is cleared.
For block formatting context you can refer this answer Why does overflow hidden stop floating elements escaping their container?
Also please refer : Parent Height doesn't follow their float children
First of all, when you remove overflow:hidden from the navbar, it makes the menu items disappear because there is no background in .navbar at that time and both a and button tags has color: fff; which is same as page background color.
Now, why we need overflow:hidden; in .navbar
Its because all the child inside .navbar has float property associated with them and floated elements don't take any space in normal document flow. Now if the child elements are not taking any space then the height property for parent (.navbar) is 0.
To maintain the height property of parent class when child classes are floated, we use overflow: hidden; property
Hope it help
This is what I tried.
CSS:
div#Layer3:hover div#Layer3copy
{
display: inline-block;
}
HTML:
<div id="Layer3"><img src="images/Layer3.png">
<div id="Layer3copy"><img src="images/Layer3copy.png"></div>
</div>
I want this div to be hidden and when hover another div it appear, however, its working OK,
But moved a little bit from it actual place,
is there a solution for it?
Alright, first you need to know display,position and pseudo state properties of CSS
in your snippet #Layer3 is wrapping #Layer3copy so we can invoke it on hover state by using direct child selector i.e
#Layer3:hover > #Layer3copy{
/*Do your things here*/
}
working example: https://jsfiddle.net/ishusupah/eupfr101/
In this example as you wanted i am using #Layer3copy display:none and on hover state i am making it display:block.
you can display and position however you want.
You are not hiding/showing any div. What you are actually doing in the code above is when Layer3 div is hovered on, you are changing Layer3copy div style to be inline block - and that's why it is moving. A div is by default a block element - which means it is taking up a full width of a row. When you change it to an inline-block you are "telling" the div to align next to another element if there is enough width in a row, and not take the full width - that's why the div is moving next to the parent div.
You also need to modify your selectors to achieve your requirement.
To actually achieve what you want (hiding and displaying back the Layer3copy without it being moving), use this CSS code:
#Layer3 #Layer3copy{
display: none;
}
#Layer3:hover #Layer3copy{
border: 3px solid red;
display: block;
}
The first selector is giving the default definition when layer3 - the container div is not hovered - in which the child Layer3copy div is not displayed (display:none).
The second selector is saying when layer3 is hovered apply styling to Layer3copy and turn it to display:block - which is the default display for divs (they are block elements) - this it is getting displayed and staying it its initial position without "movement".
Here is a working example with the above code.
I've additionally added a thin red border to the inner div, so you'll see what i mean in a block element - which is taking the entire width of a row.
try using this
#Layer3:hover > #Layer3Copy {
position: absolute;
display: inline-block;
/** Postion of your div **/
}
Try to adjust the position until it is placed wherever you want it to be in.
I think you want to be like a tooltip or something
I have two divs with fixed width placed next to each other in a parent div. I want to prevent the two divs to be placed under another if the parents' width becomes smaller than the childrens combinded width. They should stay next to each other, and overflow the parent.
See this fiddle
As you can see I want the two children to overlap with relative positioning. This leaves a lot of blank space in the parent that I want to eliminate.
Because I want the height of the parent to adapt to the tallest child (assume that the height changes and is not fix) I can not use float or position: absolute; which makes it tricky.
I am out of ideas. Any suggestions?
I would like the solution to include at least IE8.
If I understand the question correctly, just add the property "white-space: nowrap;" to the parent element.
See this fiddle: http://jsfiddle.net/qk0qrj54/2/
#parent {
background-color: yellow;
width: 380px;
white-space: nowrap;
}
I have a div that encapsulates many unordered lists (ul). I have each ul set to "float:left". And I also have the parent div that contains them set to "overflow-x:scroll". What's happening is the ul's are wrapping when they hit the edge of the page and not staying side by side to take advantage of the scrolling property of the parent div (the scroll bars are there). Why? How can I fix this?
Thanks for any help.
you need to insert those uls in another div, to which you'll give width=[width of ul]*[number of uls]
http://jsfiddle.net/seler/gAGKh/
or count total width of uls
http://jsfiddle.net/seler/gAGKh/1/
You can set your list items to display: inline-block, then use white-space: nowrap. Works in most modern browsers.
http://jsfiddle.net/gAGKh/22/
Because you floated the ULs, they don't exist in the document flow anymore so they won't expand the parent div (hence the wrapping.)
Try setting an explicit width on the parent div that allows for all of them to exist side by side.
ALSO, if you aren't clearing the ULs in the parent div then you'll more than likely run into issues there too, vertical ones. Make sure you clear your floats :)
You need to:
Make the <li> also float.
Set fixed width to each <ul>.
Set fixed width to the containing <div>, enough to hold all the lists.
For example:
ul { width: 250px; }
li { margin-left: 5px; }
ul, li { float: left; }
div { overflow-x: scroll; width: 750px; }
Test case.