I need to have two inline divs, the left div should be fluid and the right should be fixed. The minimum width for the left fluid column should be 801px and the maximum width for the left div should be 1250px. The right fixed div width should always be an exact 250px.
Can someone please show me how to do this? If the body width is 1500px for example, the left fluid div should grow and push the right div out to 1250px and stop. If the body content is 801px then the left div should be around 550px.
I've already asked this question but wasn't able to get anything that worked.
.intro {
float:left;
height:200px;
width:100%;
padding:10px 0;
}
.intro-right,
.intro-left{
display:inline;
}
.intro-right {
float:left;
width:250px;
margin-right:20px;
height:200px;
}
.intro-left {
min-width:801px;
max-width:1250px;
height:200px;
}
<div class="intro">
<div class="intro-left">
<h2>Test</h2>
<p>Test</p>
</div>
<div class="intro-right">right fixed</div>
</div>
try with javascript in a way that will look not too bad on page load
for example you hide right-intro, with left set to 100%,
on load calculate the size for left make appear right from the right while decreasing left + a fallback if no javascript with fixed width for both
NB: add a window resize event listener
Related
Appologies for a duplicate question, but none of the answers to the other questions seem to fix my problem. I would like to align a div in the center of the page. The div must only be as wide as the content inside it. It will be used as a modal popup. I have setup a jsFiddle here: http://jsfiddle.net/PDzNj/11/
The div aligns its left side in the middle and not the center of the div (which is the desired effect)
Thank you in advance for any help
One option is to emulate a table with the <div>'s surroundings.
<div class='outer'>
<div class='inner'>
<div class='thebox'>Contents</div>
</div>
</div>
And then use the CSS:
div.outer {
display:table;
width:100%; //Or however wide you want the container to be
}
div.inner {
display:table-cell; //This allows the use of vertical-align
vertical-align:middle;
text-align:center;
width:100%;
}
div.thebox { //Your variable-width container
display:inline-block; //Makes it obey text-aligning.
}
You can of course add height values as needed. This is neater, CSS wise, than making it relative, or using margins, and also disrupts the surroundings less.
Now I want the text "(även uppfinnare)" to display at the top row. The HTML that does it now is
<div class="data-box">
<div class="personName"><strong>
3. Kee Marcello
</strong></div>
<div class="otherDetails">(även uppfinnare)</div>
<table border="0"><tr><td></td><td>Telefon</td><td>123</td></tr>
<tr><td></td><td>Fax</td><td>123</td></tr>
<tr><td></td><td>E-post</td><td>123</td></tr>
<tr><td>null</td><td>Referens</td><td></td></tr>
</table>
</div>
The relevant CSS is
.data-box {
width:650px;
height:100px;
border:1px solid #cbcbcb;
}
.personName { float:left; width:300px; }
.otherDetails { float:right; width:450px; }
Can you help me? Thanks
apply float left both to .personName and .otherDetails and make sure that .data-box width is almost 750px (300px + 450px) or just reduce the size of the 2 side-by-side div so the sum of their width is no wider than 650px
It falls down because it doesn't fit on the container. .data-box is 650px width, and .personName and .otherDetails width sums up to 750px
Both your elements are floated (one to the right, one to the left), and together they make up 750px. but the container element is only 650px wide.
when floated elements run out of space, they get shuffled to the next line.
either make the children elements smaller (to fit into 650px) or make the parent bigger(750px)
I am new to Css. I have an HTML page.
<body>
<div id="viewer">
<div id="flow">
<img src="images/beatles.jpg">
<img src="images/blink.jpg">
<img src="images/doves.jpg">
<img src="images/flash.jpg">
<img src="images/floyd.jpg">
<img src="images/jurassic.jpg">
<img src="images/naked.jpg">
<img src="images/prodigy.jpg">
<img src="images/xx.jpg">
<img src="images/zabiela.jpg">
</div> <!--end of <div id="flow"> -->
<ul>
<li id="left">
Left
</li>
<li id="right">
Right
</li>
</ul>
</div> <!--end of <div id="viewer"> -->
</body>
Each image is 200x200. Now i am confused with the css of it. Here i show it step by step
#viewer {
width:700px;
height:220px;
padding:100px 0 30px;
margin:auto;
border:1px solid #000;
position:relative;
}
You define width and height of main Div. Define padding, means each element that is place inside div will place 200px from top, no sapce from left and right, 30px space from bottom of div. Also i want to ask here we define position relative. Is it relative with respect to body or html?
We didn't define the #flow div width and height. So it calculated by the padding. The #flow div width is same as the #viewer width, but place 30px below from top of #viewer div, it's height is 190px, place 30px above from bottom. Please tell me if i am wrong.
#flow:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
Now we are defining content that we want to enter after the #flow div. We set it's visibility hidden, means it is there, taking up the space but not showing. Is it? The thing that i want to ask here is this, that we are using clear:both here. What are we clearing here? we didn't set any float property in the #viewer div?
Now comes the confusing part
#flow img {
display:block;
margin-left:-165px;
position:relative;
top:-15px;
left:245px;
float:left;
background-color:#fff;
}
Now we are setting images, that are in the #flow Div. First thing that i notice which is confusing that if i set it's top property to 1px. Then it align with respect to # flow div. Which is fine because it's position is relative, and it is inside #flow div, so it is aligning with respect to #flow div.
But when i change it's left property to 1px. Then it goes beyond the both divs(#viewer and #flow). Align itself somewhere between the mid of scree left corner and left of div. Why it is happening. If it's position is relative, then it should remain inside the #flow div. This is my confusion.
Also images are shrink to accommodate inside the div. I think it's because of the dov size. That each image is 200x200. Our #flow width is 700px only.
Another thing we set margin-left:-165px;. Right now images are arrange horizontally and also shrink to accommodate in the div. But if i change to margin-left:165px;. Then images are expand vertically and all images are shown. Images are not shrink. Also we set top:-15px;. When are we set values in negative?
It's not an assignment or homework. I am just practicing and i want to know how things are working. Here are the remaining css
#viewer li {
list-style-type:none;
position:absolute;
bottom:10px;
}
#left {
left:20px;
}
#right {
right:20px;
}
Thanks
A good start to find out how the css works is to install firefox with firebug. In firebug, you can hover over elements to see their styling.
Secondly, I would place the images in li tags for better organization.
I currently have a div with width:auto to fill the entire screen width but I want to put a side bar on the right hand side.
When I float the width:auto div left and fixed width div to the right it goes under instead.
I'm basically looking for something similar to what reddit have with there search bar on the right width the content auto adjusting to the page width.
Thanks
You can make it like this:
Say you have those 2 divs inside a parent container, which expands to fit the page:
<div id="container">
<div id="autowidth">text expands her...</div>
<div id="fixed">This is a fixed column</div>
</div>
In your CSS:
#container {
width:100%;
border:1px solid black;
padding-right:200px;
}
#autowidth{
width:100%;
background-color:red;
float:left;
}
#fixed{
width:200px;
background-color:green;
float:right;
margin-right:-200px;
}
Basically, the parent container holds everything together. It has a padding of 200px (the width of the right col), so that its content doesnt goes beyond that point. In turn, the right col has a margin of -200px, so that it forces the boundaries imposed by the parent padding and places itself always at the foremost right. The other div, actually, now has only the spaces provided by the parent container, constrained by its padding, so its 100% would be, in fact, (100% - (parent's padding)). You can see a working result of this here: jsfiddle.
I'm pretty sure there might be more elegant solutions out there, so bear with me.
if you want to give a background, like it were 2 cols, you can go for the classical 'faux columns' background (see example at a list apart )
You don't strictly need a container div. I did css inline for brevity.
<div style="float:right; width:14em; background-color:#CCC;">
<p>This div is fixed-width.</p>
</div>
<div style="background-color:#EEE; margin-right:14.5em;">
<p>This div is auto-width.</p>
</div>
The answer doesn't work for me, I think it's outdated. Now you have to specify box-sizing: border-box for padding to count to width, but thanks for inspiration. This is my solution.
#autowidth {
float:left;
width:100%;
padding-right:200px;
box-sizing:border-box;
}
#fixed {
float:right;
width:200px;
margin-left:-200px;
}
My markup looks like this :
<div class='container' style='margin:10em'>
<div class='content'><p>some content here !</p></div>
</div>
Now I want to hide '.content' partially, that is imagine it to be shifted half way left side, and the other half should be visible and not the left half.
Try this:
.container { overflow:hidden; }
.content { margin-left:-50px; } /* or any amount you want*/
Edit:
margin should be -50px to hide left side.