wanna know is there a way to do this:
<div class="booth">
<div class="part">Part 1</div>
<div class="part">Part 2</div>
<div class="part">Part 3</div>
<div class="part">Part 4</div>
</div>
Using the :hover on css i expand the size of an inner div to a height:100% width:100% from the .booth class. I have the problem that the title of each part is visible over the full size.
it's difficult to explain...i know, and my english is not good....
I think your taking about having either of the 4 div expand to the full size of the parent div and overlap the other child divs. I would try using the z-index property on the "part" class instead of the booth to resolve it.
Related
On my webpage, I have a div element on the left with a static width of 300px. Right next to it, on the right, I want to display another element which has a dynamic, flexible width (because the browser window could be resized by the user) by using the Bootstrap grid with col-12. Imagine this:
<div class="row">
<div style="width:300px;"></div>
<div class="col-12"></div>
</div>
The div with class="col-12" should be right next to the left div, without space in between of them, and it should be growing/flexing always to the right of the window.
Unfortunately, it seems not to work, having a static px-width on the left element, and on the right an flex element with col-12. The second div is always BELOW the first div. Do you know a solution? Thanks in advance!
Try giving the second div in the row the class "col".
<div class="row">
<div style="width:300px;"></div>
<div class="col"></div>
</div>
Regards!
I have a div surrounding multiple divs. The border of parent div is not covering all child divs as shown in the fiddle. Can anyone tell what is the issue here?
<div style="border:1px dashed gray;">
<div style="position:relative;top:10px;"><input type="text" placeholder="https://" /></div>
<div style="position:relative;top:30px;"><input type="text" placeholder="https://" /></div>
<div style="position:relative;top:50px;font-size: 10px">Some content</div>
<div style="position:relative;top:60px;background-color:#E6E0EC">
<div class="glyphicon glyphicon-remove"></div>
</div>
</div>
JSFiddle link
You are using position: relative on the divs not surrounded by the border. The relative position property moves the contents of the element but keeps the reserved space of the element in the normal flow.
If you want to achieve the same layout with a border around everything it is best to use the marginproperty. I updated your jsfiddle to show an example
JsFiddle
Well there is no need for position relative, in all the child divs, just remove those tags.
Using top to specify the spacing is not a good idea in a case like this. It will be fragile. Let the elements make room for themselves and let the box model make space in the parent. To do this use margin-top instead.
Fiddle: http://jsfiddle.net/markm/rmvneo88/
Here is an simplified example of my real problem.
<div id="con">
<div id="a"></div>
<div id="b"></div>
<div id="c">
<div id="d"></div>
<div id="e">blablabla</div>
</div>
</div>
Is it possible to put the #a div between #d and #e?
Check it live here:
http://sunnyweb.hu/test.php
Can I bring the "blablabla" before to the blue div without changing the div structure?
I am not sure about the first part of your question because I don't you if you want to position the divs with position so they are in some kind of order or z-index so they are stacked a certain way.
But the second part is real easy. All you need to do is set the z-index of div#e to something higher then div#a's z-index.
I'm making a 2-column layout with divs.
It should be something like this: http://dl.dropbox.com/u/4976861/html-demo.html
But there is a problem. If content stretches the side blocks vertically, the left blocks shift downwards: http://dl.dropbox.com/u/4976861/html-demo-2.html
If I put the sidebar into a wrapper div, it works fine, but it will make the code quiet messy because of the paddings and some background issues which I removed to simplify the demo, so I would like to leave this option for now.
I don't think that you're going to be able to produce the results that you would like without changing the underlying HTML. You're trying to allow elements to flow (both vertically and horizontally) within the page, but the order in which you have the elements is not going to allow this.
I might be teaching you to suck eggs, but my preference for the HTML output would be something like this:
<div class="wrap">
<div class="column1">
<div>left 1</div>
<div>left 2</div>
<div>left 3</div>
</div>
<div class="column2">
<div>right 1</div>
<div>right 2</div>
</div>
</div>
Put this under the 2 divs:
<div style="clear:both;"></div>
<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
Why does the background color not show as black? I cannot set the width and float, is it possible without them?
Since the outer div only contains floated divs, it renders with 0 height. Either give it a height or set its overflow to hidden.
Change it to:
<div style="background-color:black; overflow:hidden;" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
Basically the outer div only contains floats. Floats are removed from the normal flow. As such the outer div really contains nothing and thus has no height. It really is black but you just can't see it.
The overflow:hidden property basically makes the outer div enclose the floats. The other way to do this is:
<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
<div style="clear:both></div>
</div>
Oh and just for completeness, you should really prefer classes to direct CSS styles.
Floats don't have a height so the containing div has a height of zero.
<div style="background-color:black; overflow:hidden;zoom:1" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
overflow:hidden clears the float for most browsers.
zoom:1 clears the float for IE.
This being a very old question but worth adding that I have just had a similar issue where a background colour on a footer element in my case didn't show. I added a position: relative which worked.