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.
Related
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
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.
How can i fix the unwanted margin of the "right" div.
The right floated div is margined like you can see here:
JSFIDDLE: http://jsfiddle.net/s9Ssh/1/
The effect i wanted to achieve is to keep .mid layer always centered no matter the lenght of side div's text.
HTML:
<div class="main">
<div class="left">left</div>
<div class="mid">
Vpis podjetja
|
Iskanje
</div>
<div class="right">right</div>
CSS:
.main {
text-align:center;
width:100%;
}
.left {
float:left;
}
.mid {
}
.right {
float:right;
}
Maybe this will help: http://jsfiddle.net/sbhomra/s9Ssh/4/
I have basically absolutely positioned the left and right div's and set the middle div to stay in the center by using margin:0 auto.
Edit
Fixed padding on left and right div's, so they are not too close the side of the page.
http://jsfiddle.net/s9Ssh/3/
Move the right floated element before the middle element in the markup. It appears on a new row because the middle element isn't floated (and is a block level element).
Alternatively you can also float the middle element or set it to inline/inline-block.
EDIT: Although to clarify, if you float the mid element then you have to fiddle around with css a little since it will break your text-align. :P
try to add display: inline-block; to .mid element
example fiddle : http://jsfiddle.net/XSdJA/
I am trying to get the following effect using css. I am trying to get bottom edges of title and 'right text' to align with logo's bottom edge, and get the title to stretch
vertically. I have included html and css
____________________________________________________________________________________________
|________________________________________________________TOP_TEXT_________________
| |
LOGO | title | right text
|____________________________________________________________________|
__________|______Menu__________________________________________________________|____________
<div id="wrapper">
<div id="logo"><img src="some.gif" width="193" height="77" /> </div>
<div id="top_text">top text</div>
<div id="right_text"> right text </div>
<div id="middle">
<div id="title">title</div>
<div id="menu">menu</div>
</div> <!-- middle -->
</div> <!-- wrapper -->
#wrapper {
width: 100%;
}
#logo {
float: left;
border-right:#FFFFFF thin solid;
}
#top_text {
text-align: right;
width: auto;
}
#right_text {
float: right;
border-left:#FFFFFF thin solid;
}
#middle{
/* may be needs some sort of height */
}
#title {
/* not sure how to put here */
}
#menu {
/* doesn't line up with bottom edge of logo and 'right' */
vertical-align:bottom;
}
In your case I guess vertical align would not be helping you. Rather you need to align your HTML more semantically so that you could use Position:relative,top and left or Margin-top/Margin right handy to align it.
Following Pseudo code Steps might be useful for you to align it.
Step 1: Try Defining logo in a container or float it alone left
Step 2: Trying defining a section comprising of three different
sections top text,title and menu and float the outer parent section as
well left.
Step 3: Try defining a right section and float it right
Step4: Position all the elements using Position:relative,top and left
or Margin-top/Margin right
The above steps would be helping you to get a picture perfect layout rather fiddling around with Vertical-align.
If you need further help on vertical-align here
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
Hope this answer helps.
Good luck.. happy coding.
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;
}