Just a little question :
.site-main .sidebar-container {
display:inline-block;
vertical-align:top;
width:25%;
padding:0px;
margin:0;
border:0;
z-index:2;
float:right;
}
.content-area-sidebar{
width:75%;
display:inline-block;
}
why this widths don't work? one of the elemnts always goes down, i need to set 24.79% width to work and then i have a small blank space between them, i have tried with all kind of float combiantions but nothing works.
Any help would be appreciated.
Thank you
set margin:0px to your second css too:
.content-area-sidebar{
width:75%;
display:inline-block;
margin:0px;
}
by ht way if it doesn't work I suggest you use a div as parent container with position relative and child divs have position absolute so never gets mixed up:
<div style="position:relative">
<div style="width:25%;top:0px;left:0px;position:absolute;"></div>
<div style="width:75%;top:0px;left:25%;position:absolute;"></div>
</div>
Related
I am having problem understanding the height of element in div. I have a header div which has certain divs inside it.The div inside occupy certain height. Isn't the header supposed to cover the area occupied by the elements defined inside it when the height is not mentioned. As per my understanding the header is supposed to wrap all the div inside it.
Please correct me if I am wrong.
This is my body
<div style=" float:left; background-color:pink; width:20%; height:40px; ">
THis is left
</div>
<div style=" float:left; background-color:gray; width:70%; height:40px; " >
<div id="htop">
This is top
</div>
<div id="hbutt" >
this is buttom
</div>
</div>
And here goes style
#cont{ background-color:yellow; width:900px; height:300px; margin:auto; padding:40px; }
#header{ background-color:red; width:100%; padding:5px; }
#cont2{ background-color:blue; width:10%; height:auto; padding:5px; clear:both; }
#htop{ background-color:maroon; }
#hbutt{ background-color:purple; }
For output and possible change need https://jsfiddle.net/sum1/vmq3y2rv/
When you have floating DIVs inside any other DIV, then height does not calculated automatically for outer DIV, to make it you should add display:inline-block or display:table to outer DIV depending on your layout.
#header {
background-color:red;
width:100%;
padding:5px;
display:inline-block;
}
Check this https://jsfiddle.net/vmq3y2rv/1/
Yes this is true but when all elements are floated inside of the header it collapses.
.clearfix{
clear:both;
}
and then insert a div right before your header ends with a class of clearfix.
Jsfiddle is here
https://jsfiddle.net/kriscoulson/vmq3y2rv/2/
You can either use float:left or display:inline-block/table , It will be based on your requirements and layout.
Actually I am too lazy to ask this question since this should be the most basic thing for me. But as I still can't solve it then this is a little thing which is important to me, I can't help it.
Yeah, the min-width is not working for me too (with some treats out there which has similar issue). I have set the inline-style, float left, and overflow hidden or not. But it still doesn't fix it.
<style>
div {
width:300px;
min-width:150px;
overflow:hidden;
background:yellow;
float:left;
display:inline;
}
</style>
<body>
<div>
This/is what I want
is/everything in this world beautiful to see for me
a/love is more happiness thing than money
text/me to say I miss you too
</div>
</body>
div {
width:30%;
min-width:150px;
overflow:hidden;
background:yellow;
float:left;
display:inline;
}
use width in % to make min-width effective otherwise it will only take 300px as set value
You set the width of the div to 300px. So this div will always be 300px wide. Change it to
max-width:300px; and it will work.
Fiddle
And now there is also no need to declare floatand inline you only need:
div {
max-width:300px;
min-width:150px;
background:yellow;
}
I've got a stylesheet where the intention is to have a fixed navbar which stays at the top of the screen no matter how far you scroll down. For this I've just used position:fixed; - but when I actually scroll down, the #content div overrides it and goes straight over the top (so the navbar stays at the top of the page but is underneath the content div.)
I haven't done any serious CSS coding in years, so I'm a bit rusty - it's probably a very simple solution, so apologies for being so trivial!
style.css
body {
margin:0;
background:#eeeeee;
}
#navbar {
background-color:#990000;
position:fixed;
width:100%;
height:50px;
text-align:center;
vertical-align:middle;
line-height:50px;
top:0px;
}
#navbar a {
color:#fff;
}
#content {
background:#eeeeee;
margin-top:50px;
width:100%;
}
#feed {
background: #fff;
position:absolute;
left:22%;
width:776px;
}
Pages are structured like this:
<body>
<div id="navbar"><?php include core/navbar.php; ?></div>
<div id="content">
<div id="feed">
CONTENT
</div>
</div>
</body>
In order to fix this you need the property z-indexdefined by W3 that specify the level of the element. Try this:
#navbar {
background-color:#990000;
position:fixed;
z-index:1; /*Add this*/
width:100%;
height:50px;
text-align:center;
vertical-align:middle;
line-height:50px;
top:0px;
}
If you're using Bootstrap 4, the .navbar background is clear and can be covered by some elements. Setting the z-index won't work. Use a background color, e.g., .bg-white.
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-white">
To fix the override issue use CSS z-index Property
z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) .
#navbar {
background-color:#990000;
position:fixed;
z-index: 1;
width:100%;
height:50px;
text-align:center;
vertical-align:middle;
line-height:50px;
top:0px;
}
Sometimes if you use z-index -1 in order not to let the element pass over the fixed nav bar this thing solves the problem but at the same time another problem arises, now on the element which we gave z-index:-1, hover will not work.
So to take care of these things we must use index 0 at the element and in the fixed nav bar we need to use z index 1. then all things will be sorted.
I keep finding almost solutions to something that I feel should be really simple, but can't figure it out. (note - i'm at a really rudimentary stage of learning CSS right now)
I have one image to put on a page. Center horizontal/vertical. In a div container that is 80% of the window height and width. I would like the image to stretch to fill either the height or the width of that div, based on whichever is smallest.
I'm sure this is simple for most, but again, I'm just learning. Any direction on this would be wonderful.
I created an illustration in case i'm not explaining well enough:
Try this http://jsfiddle.net/David_Knowles/ddh2k/
This does most of what you want. You'll need to add some extra javascript if you really only want the image to be 80% of the available height when the screen height is reduced to less than the image intrinsic height.
<body>
<div id="container">
<img src="http://dummyimage.com/600x400/000/fff.jpg" alt="apropriate alt text">
</div>
</body>
html,
body{
height:100%;
width:100%;
margin:0;
padding:0;
background-color: #eee;
}
#container{
margin: auto;
width:100%;
height:100%;
text-align:center;
font-size:0;
white-space:nowrap;
background:#aae;
}
#container:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
img {
width:80%;
height:auto;
display:inline-block;
vertical-align:middle;
background:#fff;
}
I need this blue div to be next to red div, while yellow div must remain in place.
http://jsfiddle.net/pCGxe/
How to do this without using something like position:absolute, float:none - etc... nasty hacks?
Add margin-top: -50px to the big div.
Alternatively, you can also wrap the small divs in another div, and float that. Depends on the situation.
And position: absolute, float: none are not nasty hacks at all, they are the best friends of a sitebuilder :).
Don't add margins with fixed numbers and especially no margins with fixed negative numbers. What if your site's design or the size of the divs changes later? You'd need to change all those margins.
Here you go:
http://jsfiddle.net/pCGxe/10/
HTML
<div id="container">
<div id="div1and2">
<div id="div1"></div>
<div id="div2"></div>
</div>
<div id="bigdiv"></div>
</div>
CSS
#div1and2 {
float: left;
}
In my opinion absolute positioning is not a hack, rather most developers just don't know how to use it - it's almost like occult CSS knowledge :P
So here's an example of how absolute positioning could be used to solve this particular problem:
#container{
width:500px;
height:400px;
border:1px dashed black;
position:relative;
top:0px;
left:0px;
}
#div1{
width:50px;
height:50px;
background:red;
}
#div2{
width:50px;
height:100px;
background:yellow;
}
#bigdiv{
width:350px;
height:250px;
position:absolute;
left:50px;
top:0px;
background:blue;
}
In order for absolute positioning to work properly, one of the ancestor elements of the absolutely positioned element (in this case #bigdiv) has to be positioned non-statically. position:static is the default positioning for any element, so if I want #bigdiv to be 50pxaway from the left side of #container, #container has to have non-static positioning; hence the position:relative;.
For the record, float:none is definitely not a hack :P
CSS
#container{
width:500px;
height:400px;
border:1px dashed black;
}
#div1{
width:50px;
height:50px;
background:red;
}
#div2{
width:50px;
height:100px;
float:left;
background:yellow;
}
#bigdiv{
width:350px;
height:250px;
float:right;
background:blue;
margin-right: 100px;
}
HTML
<div id="container">
<div id="bigdiv"></div>
<div id="div1"></div>
<div id="div2"></div>
</div>