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;
}
Related
I have structure where in the text needs to flow within the div box in the body. but seems like i cant get it to work. Maybe i am doing something wrong with the position: tag?
Here is the fiddle: http://jsfiddle.net/Tf5Z8/
and this is what i was hoping to accomplish: http://oi58.tinypic.com/332njm9.jpg so that as text keeps getting added (less or more), it keeps the bottom intact and resizes the div accordingly. Right now i have the #bodyContainer set to height:300px;
#bodyContainer { width:1024px; height:300px; margin:auto; background-color:#f4f3e7; padding-top:20px; }
but i don't want to do this since there would be many pages with different text amount.
Thanks a million, Cheers.
Change the #bodyContainer height to auto. Like this: JSFiddle
All you have to do is add min-height. So replace height property with min-height. And you are done.
If you don't have any problems using absolute position try this method. Add relative position to #bodyContainer and absolute position to #sidebarLeft, then float:right sidebarRight. Check this fiddle
CSS changes
#bodyContainer {
width:1024px;
min-height:100px;
margin:auto;
background-color:#f4f3e7;
padding-top:20px;
position:relative;
overflow:hidden;
}
#sidebarLeft {
height:100%;
width:360px;
background-color:#FFF;
margin-left:30px;
margin-bottom:20px;
position:absolute;
top:20px;
left:0
}
#sidebarRight {
height:100%;
width:634px;
float:right;
}
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>
I have 2 divs inside a wrapper div and I was wondering if it's possible to bring the #wrapper div on top of the content (#outer and #inner).
<div id="wrapper">
<div id="outer">
<div id="inner"></div>
</div>
</div>
I want the #wrapper to add a transparent background without making any changes to the HTML. I have tried doing so using z-index without success.
See this fiddle: http://jsfiddle.net/nPpDE/
Any help is much appreciated.
Managed it using :after- http://jsfiddle.net/t6mMR/ -No extra html!
Like this:
#wrapper:after {
position:relative;
top:-200px;
left:0px;
content:"";
width:400px;
height:200px;
display:block;
background:rgba(255, 0, 0,0.5)
}
The pseudo-element is placed above the others, and a semi transparent background applied to it.
__
EDIT: A slightly different way of doing it- (see comment below) (using position:absolute
http://jsfiddle.net/t6mMR/1/
__
Note- To be able to "click through" the pseudo-element, add pointer-events: none; to it.
http://jsfiddle.net/t6mMR/1/
To get this to work in IE, see css 'pointer-events' property alternative for IE, it may help.
You can give the children position: relative and z-index: -1 (or otherwise negative value), but I'm not sure how buggy that is or what the browser support is.
some more info available here: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Here's a quick example: http://codepen.io/Rykus0/full/jhwev
Otherwise, as others have said, you need to include a new element and position using either absolute or fixed
What you are asking is not possible.
However, it is possible when you add another div inside the #wrapper and position it with
position:absolute;
and give it a transparent color
http://jsfiddle.net/nPpDE/1/
EDIT: Harley's solution is better since the OP doesn't want to change the HTML
?? and what about having opacity colors on inner containers and regular color on main container:
#wrapper{
position:relative;
background:black;
width:400px;
height:200px;
}
#outer{
position:relative;
width:400px;
height:200px;
background: rgba(50,0,0,0.75);
}
#inner{
position:relative;
width:350px;
height:200px;
background:rgba(0,50,0,0.75);
margin: 0 auto;
}
fiddle that goes with it :) http://jsfiddle.net/nPpDE/2/
I know this has been asked somewhere else, but I can't find the solution. I have a simple layout. A container Div with two floating divs inside. The left div holds the navigation and has a background image. The right div has a solid background and is dynamic based on the content of each page. I am not having issues with the content div. My problem is I want the left div to "stretch" vertically to match the height of the content div. What is happening is the left is only stretching to the min-height value. Here is my CSS:
#containerTemp {
margin-left:auto;
margin-right:auto;
width:1000px;
min-height:100px;
height:auto;
}
#containerNavigation {
width:210px;
float:left;
background-image:url(../images/template/linkbgd.gif);
background-repeat:repeat-y;
min-height:500px;
height:100%;
}
#containerContent {
width:790px;
background:#FFFFFF;
background-repeat:repeat-y;
float:right;
min-height:500px;
height:100%;
}
You can see the issue by visiting this page: http://www.athensfireandrescue.org/?pid=7
I am sure it's something simple, but I can't put my finger on it. Sorry for the redundant question, but my searches just didnt' turn up viable solutions.
Heights can be a bit tricky. However the goal is to make sure the parent containers have 100% height.You have a lot of stuff going on in your web page. So I created an isolated demo to demonstrate how this works.
HTML
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
CSS
html, body {height:100%;}
.wrapper {
width:400px;
height:100%;
margin:0 auto;
}
.left {
width:198px;
border:1px solid black;
float:left;
height:100%;
}
.right {
width:198px;
border:1px solid red;
float:left;
height:100%;
}
DEMO:
http://jsfiddle.net/nFdtT/
SOME OTHER STUFF I NOTICED:
If I can offer some advice I would suggest the following:
Don't use tables unless it is tabular data. Your NAV should be constructed using a list.
Remove all inline styles and place them in a separate stylesheet.
<meta> and <style> tags should be in the <head> of your document. (For some reason you have a partial doctype heading nested inside of your <head>)
And if you aren't already, I would suggest using a CSS reset.
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;
}