After the header I have one div which contains two others, which are next to each other. I want to create a border between them. I've tried to use the right border of the left div or the left border of the right div, but they don't work right.
The right div can have much content, so I have to do overflow: hidden for it, so I can scroll the page. But if I have only little content, the div will not fill the entire page vertically, so the left border will be to small. Here -> http://www-user.tu-cottbus.de/~carbusor/Red%20Diamond/html/index.html you can see what I'm talking about.
When the right div increases vertically, I want the border to go to the bottom, to follow it's size.
HTML:
<div id="wrapper">
<div id="leftsidebar">
<form id="logoutForm" action="index.html">
<h1 id="login_title">Logout</h1>
<fieldset id="actions">
<input id="logout" type="submit" value="Log out" />
</fieldset>
</form>
</div>
<div id="main">
<span id="location">Home</span>
News
</div>
</div>
CSS:
div#wrapper{
position:absolute;
top:25%;
width:100%;
}
div#leftsidebar{
/*position:absolute;
top:25%;*/
width:19.87%;
height:100%;
min-width:200px;
float:left;
}
div#main{
/*position:absolute;
top:25%;
left:20%;*/
/*width:79.81%;
float: left;*/
font-size:1.2em;
border-left-color:white;
border-left-style:solid;
border-left-width:3px;
overflow:hidden;
padding-bottom:2%;
}
How can I obtain what I want?
Give the wrapper and the main div the right height and you'll get the result.
div#wrapper{
position:absolute; /*Stayed this whay cause you needed it*/
top:25%;
height: 75%; /**Make the wrapper contain all the needed space*/
width:100%;
}
div#main{
height:96%;
/**Value actually needs be a bit less then 100 due to padding*/
.... /**You're code here*/
}
You can see the result in action on the following jsFiddle.
http://jsfiddle.net/pY6nF/
Related
I'm trying to overlay two div elements, the underlying has a background the overlaying can not have one, since later there will be a background image in the back.
I want the underlying text to be cut off at the place where it is behind the overlaying div.
The only way I found was to set background-color: white; to the overlaying div, as mentioned this is not possible.
Any tip/solution how do I accomplish this?
<div style="background-color:red;z-index:1;overflow:hidden;position:absolute;left:262px;top:222px;width:191px;height:48px;">
This is a TEST text.
</div>
<div style="border:1px solid black;z-index:2;overflow:hidden;position:absolute;left:152px;top:177px;width:199px;height:156px;">
Top Element
</div>
Would this work for you? Basically, I've added a third div with the background color white that you can set it's display to none when the image goes into the lower div. This is mainly just a thought, it can probably be applied to the lower div instead.
<html>
<head>
<style>
#botDiv{
background-color:red;
z-index:1;
overflow:hidden;
position:absolute;
left:262px;
top:222px;
width:191px;
height:48px;
}
#topDiv{
border:1px solid black;
z-index:2;
overflow:hidden;
position:absolute;
left:152px;
top:177px;
width:199px;
height:156px;
}
#interSectingDiv{
background-color:#fff;
position:relative;
top:26px;
left:109px;
overflow:hidden;
width:191px;
height:48px;
display:block;
}
</style>
</head>
<body>
<div id="botDiv">
This is a TEST text.
</div>
<div id="topDiv">
Top Element
<div id="interSectingDiv"></div>
</div>
</body>
</html>
[ updated ]
Another thought, is that you can probably shorten the width of the lower div by the amount of space it consumes from the higher div and position it at the right edge of the higher div until the image goes in (you'll most likely have to use animation in your css that's triggered by some form of javascript).
I want to have a solid grey bar in a DIV called "bottomGrey" at the bottom of a container DIV called "contactCopy".
<div id="contactCopy">
<div id="contactLeft">
CONTACT
</div>
<div id="contactRight">
<iframe src="https://www.google.com/maps/embed?pb=!1m5!3m3!1m2!1s0x87e2349d140afa9f%3A0x9b41dc0528aa1d72!2s131+W+2nd+St+%23400%2C+Davenport%2C+IA+52801!5e0!3m2!1sen!2sus!4v1389913120076" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
</div>
<div id="bottomGrey"></div>
<div class="clr"></div>
</div>
the CSS
#contactLeft{
float:left;
width:30%;
padding:5%;
}
#contactRight{
float:left;
width:640px;
height:480px;
padding-top:5%;
padding-bottom:5%;
margin-left:5%;
position:relative;
}
#contactCopy{
position:relative;
}
#bottomGrey{
position:absolute;
bottom:0;
height:10%;
width:100%;
}
but it doesn't display at all, even if I remove the "contactLeft" and "contactRight" DIVS.
This should be simple but :(
Live site: http://estes.nbson.com/contact.html
It is displaying: its just got a white background and no content. Add a background color to it and you'll see what I mean.
Just add this to your CSS:
#contactCopy:after {
display: block;
height: 10px;
width:100%;
background-color: grey;
content: "";
clear: both;
}
With that you can remove <div id="bottomGrey"></div> and <div class="clr"></div> from your HTML structure, and get the grey border and clearing at the same time.
Give it a background color, 100% width and some content. Also Assuming the clr class is a clear fix implementation. Put it be for the bottom grey div. So contact copy will have a proper height, and bottom grey will sit bellow both floated divs. No need for the absolute position.
Hello i found a very peculiar thing, apparently left is rendered different from right.
see this fiddle:
http://jsfiddle.net/Hn8At/2/
here is the html
<div id="wraper">
<div id="ribbon_ct">
<div class="ribbon left"></div>
<div class="ribbon right"></div>
</div>
</div>
and the css
body{ margin:0; padding:0px; }
#wraper{ width:800px; margin:0 auto; background:#eee;padding-top:500px;}
#ribbon_ct{ width:100%; background:#c00; height:400px; }
.ribbon{background:#0C9; width:30px; height:30px; position:relative;}
.left{float:left;}
.right{float:right;}
.ribbon.left{ left:-30px;}
.ribbon.right{ right:-30px;}
I have 2 green squares on either side, one causes a scrollbar, the other does not. You can only scroll the right one into view. any ideas as to why?
Its absolutely normal.
If an elements overflows the body from the left, it will be hidden, and from the right it will be scrolled.
use overflow:hidden; on #ribbon_ct if you want the right div to be hidden.
Your #ribbon_ct is 800px wide because of width: 100% of #wraper and centered.
When you don't give width to his parent (for ex: body {width:1000px;}) or widen the viewport you can't see the left green square, because you positioned left: -30px;.
Try your code not in jsfiddle but directly in browser.
And if #wraper was not centered, you can't see left square even when resizing,
Usually I would do this by either setting the margin to auto, using position:absolute, or via padding but unfortunately these will not work in this case. I need a div to be about 15 pixels off-center horizontally from the page. The tricky bit is it needs to scale correctly as the page widens. It seems to me that I would need to do this horizontal adjustment based on the center point, rather than the left hand side. How could I achieve this? Thanks.
Use a container div, which is centered, then its content you can give margin-left:npx - like so:
HTML
<div id="container">
<span id="green"> </span><br />
<span id="blue"> </span>
</div>
CSS
#container{width:100px; margin:auto auto; background-color:red;}
#container span{display:block; width:100%; }
#green{background-color:green; margin-left:10px;}
#blue{background-color:blue; margin-left:-10px;}
See the example coded up here - http://jsfiddle.net/Xpk8A/1/
give a wrapper with:
margin: auto;
position: absolute;
inside wrapper, put div:
position:relative;
left: -15px; (or whatever you want)
example page would help.
You can absolutely position your div and set the left attribute to 50%. Then, set the margin-left to 50% + 5px (whatever that is). This would only work if you have a fixed width on the box, however. For example, if the box is 200px wide, the margin-left would be -115px.
The key is to set width:100% and a fixed margin, as you can see in my example below
<style>
div {
background-color:red;
height:100px;
margin:0 auto;
width:100%;
margin-left:15px;
}
</style>
<div></div>
<html>
<body>
<div class="centered">
<div class="offcenter">
</div>
</div>
</body>
</html>
The css will be:
.centered
{
margin: 0 auto;
width:300px;
height:200px;
background-color:red;
}
.offcenter
{
background-color:blue;
width:285px;
height:inherit;
float:right;
}
http://jsfiddle.net/evbbq/
You can use display:inline-block for center the DIV then give your margin to it .
Like this:
.Parent{text-align:center;}
.Child{
display:inline-block;
text-align:left;
width:200px;
height:150px;
background:red;
margin-left:15px;
}
Check this fiddle http://jsfiddle.net/Xpk8A/2/
Remove margin-left:15px then click on Run button in the fiddle to see the different.
I have this markup:
<body>
<div class="prevBtn"> <a> < </a> </div>
<div id="player"> some code </div>
<div class="nextBtn"> <a> > </a> </div>
</body>
I'm trying to get this layout:
Note: The previos and the next button are close to the #player
And i'm trying like this:
.nextBtn{
float:left;
width:15%;
margin-top:180px;
}
.nextBtn a{
float:right;
}
.player{
float:left;
width:70%;
margin-top:100px;
}
.prevBtn{
float:right;
width:15%;
margin-top:180px;
}
.rightBtn a{
float:left;
}
the problem is that it doesn't stay like the layout if the resolution is too big or too small,
How can I achieve this for any resolution?
surround it with a div with 770px + the left and right buttons width (change their widths from percent to a fixed width).
This will guarantee all are together.
Also use a overflow: hidden or a div with clear:both at the end, this will make sure everything is in place.