I have a div but i dont know how to set the css position attributes. I would like the div (nav) to be placed in the middle of the page. Then i would like to place content in the div so that the border comes around the content. Currently, the div border doesnt border anything and the content that it should border appears below the div.
HTML:
<div id='nav'>
<a id='ask' class='button' unselectable='on' style='left: 20px;' href='#'>one</a>
<a id='unanswered' class='button' unselectable='on' style='left: 120px;' href='#'>two</a>
<a id='unanswered' class='button' unselectable='on' style='left: 220px;' href='#'>three</a>
<a id='unanswered' class='button' unselectable='on' style='left: 320px;' href='#'>four</a>
CSS:
.button{
position: absolute;
top: 50px;
border: 1px solid orange;
cursor: pointer;
padding: 0px 10px 0px 10px;
}
#nav{
position: relative;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
border: 1px solid gray;
width: 700px;
}
Since .button is set to position:absolute, the container div (.nav) isn't counting their height into its own.
Add a clearing div after the links:
<div style="clear:both;"></div>
This should do the trick.
Also, you don't really need to have your a elements set to position:absolute—here's my solution:
.button {
display:inline-block;
margin-top: 50px;
margin-right:80px;
border: 1px solid orange;
cursor: pointer;
padding: 0px 10px;
}
#nav {
position: relative;
margin: 0 auto;
border: 1px solid gray;
}
Example.
An alternative to Purmou's solution is to specifically set the #nav's div height in the css:
#nav
{
position: relative;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
border: 1px solid gray;
width: 700px;
height: 120px;
}
Like shown in this fiddle.
Related
I am trying to achieve the box-shadow inside the right-border, currently everything is working fine except the shadow is getting display outside the right border. Following is the js-fiddle sample code I have tried...
http://jsfiddle.net/5y1guk6d/1/
HTML:
<div class="header">
<div class="header-bar">
<h1 class="title">Page title</h1>
</div>
</div>
<div class="main">
<div class="left-bar">
<div class="menu">
Menu Content
</div>
</div>
<div class="content">
Main content area
</div>
</div>
CSS:
.header {
width: 100%;
height: 40px;
top: 0;
color: white;
}
.header-bar {
height: 100%;
overflow: hidden;
background-color: #009BE1;
}
h1.title {
display: inline-block;
font: bold 16px Arial, sans-serif;
margin: 0 5px 0 15px;
position: relative;
top: 25%;
}
.main {
width: 100%;
overflow: hidden;
position: absolute;
top: 48px;
bottom: 0;
}
/* left bar */
.left-bar {
width: 160px;
float: left;
padding:10px;
background-color: #F0F0F0;
height: 100%;
position: relative;
border-right:1px solid #aaa;
box-shadow:5px 0 5px #ccc;
}
.content {
overflow: hidden;
left: 12px;
padding: 5px 17px 5px 5px;
height: 100%;
position: relative;
}
Appreciated your help..
If you want the box shadow to appear inside of the element instead of outside, use inset. Then you want to invert the x-offset so it appears on the right side.
box-shadow:inset -5px 0 5px #ccc;
http://jsfiddle.net/5y1guk6d/3/
This is probably is a stupid question and it's really easy to solve, but I am having trouble doing so. My question is, how do I position the two last sections (shown in the picture) below the first ones?
http://imageshack.us/photo/my-images/829/63128947.jpg/
This is my code:
#main_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
border: 1px solid black;
max-width: 1000px;
}
#main_section{
width: 600px;
height: 450px;
border: 1px solid black;
padding: 5px;
margin: 10px;
}
#sub_section1{
width: 100px;
height: 200px;
border: 1px solid black;
padding: 5px;
margin: 10px;
-webkit-box-flex: 1;
}
#sub_section2{
width: 100px;
height: 200px;
border: 1px solid black;
padding: 5px;
margin: 10px;
-webkit-box-flex: 1;
}
#sub_section3{
width: 100px;
height: 200px;
border: 1px solid black;
padding: 5px;
margin: 10px;
-webkit-box-flex: 1;
}
#sub_section4{
width: 100px;
height: 200px;
border: 1px solid black;
padding: 5px;
margin: 10px;
-webkit-box-flex: 1;
}
Here's a fiddle that demonstrates one way to do it. I simply added another div element (I called it a "sidebar"), and put the smaller divs inside of it. Each element is floated, and the width of the sidebar container is wide enough to contain these elements. You may need to resize the viewport in the fiddle to get things to flow as you have them in your screenshot.
Since your smaller div elements are all styled the same, I opted to use a class instead of multiple ID's. This way you aren't duplicating rules unnecessarily in your CSS.
Also note that this could also probably be achieved with absolute positioning, if you're into that kind of thing. There are usually multiple ways of doing things in CSS.
I just added another layer of conatining divs and called them section_top/bottom. Since divs are block elements, it should push the other two down. I also cleaned up the styles just a little :-).
fiddle
Code:
<html>
<head>
<style>
#main_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
border: 1px solid black;
max-width: 1000px;
padding: 5px;
margin: 10px;
}
#main_section{
width: 600px;
height: 450px;
border: 1px solid black;
}
.subsection {
width: 100px;
height: 200px;
border: 1px solid black;
padding: 5px;
margin: 10px;
-webkit-box-flex: 1;
}
</style>
</head>
<body>
<div id="main_div">
<div id="main_section">
</div>
<div id="section_top">
<div id="sub_section1" class="subsection">
</div>
<div id="sub_section2" class="subsection">
</div>
</div>
<div id="section_bottom">
<div id="sub_section3" class="subsection">
</div>
<div id="sub_section4" class="subsection">
</div>
</div>
</div>
</body>
</html>
Please help. I want to achieve that text and button on yellow box be alligned left and right (text on left side - margin 20 px; button on right side - margin 20 px) and menu in footer aligned with yellow box.
I can't add picture, sorry.
Edit: Added JSFiddle - http://jsfiddle.net/wqBEf/
This is my css code:
#page
{
width: 960px;
margin-left: auto;
margin-right: auto;
border: 1px solid red;
background-color: blue;
}
#page > #main
{
border: 1px solid #000;
width: 650px;
margin-left: auto;
margin-right: auto;
background: white;
border-radius: 5px;
margin-top: 20px;
}
#main > #inner
{
margin: 20px;
}
#page-title h1
{
font-size: 24px;
text-align: center;
}
#footer-hotline
{
height: 50px;
background-color: rgb(255,207,0);
border-radius: 5px;
box-shadow: 0px 3px 3px #999999;
margin-top: 20px;
border: 1px solid #000;
width: 650px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2;
}
#footer-hotline > .part
{
float: left; width: 33%;
margin-left: 20px;
line-height: 50px;
font-size: 16px;
font-weight: bold;
}
#footer-hotline > .part input
{
vertical-align:middle;
}
#footer
{
margin-top: -25px;
height: 100px;
line-height: 25px;
background-color: white;
text-transform: uppercase;
border: 1px solid black;
}
#footer > .link
{
float: left;
border-right: 1px solid #000;
margin-top: 50px;
}
#footer > .link > div
{
margin-left: 5px;
margin-right: 5px;
}
And this is my html code:
<div id="page">
<div id="main">
<div id="inner">
<div id="page-title">
<img src="myLogo.png" alt="Schulz logo" />
<h1>Some title</h1>
</div>
<div id="content">RenderBody</div>
</div>
<div class="f-c"></div>
</div>
<div id="footer-hotline">
<div class="part">Hotline: 0800/888 888</div>
<div class="part"><input type="submit" class="button" id="callback-button" value="callback" name="callback-button" /></div>
</div>
<div class="f-c"></div>
<div id="footer">
<div class="link"><div>GTC</div></div>
<div class="link"><div>About</div></div>
<div class="link"><div>Help</div></div>
<div class="link"><div>Language</div></div>
</div>
Thanx for answers, suggestions and comments.
See http://jsfiddle.net/wqBEf/1/ for an update.
Noteworthy changes.
I added left align-left and right align-right classes set for float and for text alignment, respectively.
I set your links to display: inline because it is the easiest way to center a list of items horizontally.
Those were the main two changes. The rest of the changes were just to support the above two, such as removing/adding some margins.
You could use the :first-child pseudo-class for the issue of getting the two items to work together (this will only work if you have only two at any one time). It's also well supported going back to IE7
You also need to implement float:right, direction:rtl, and margin-right:
#footer-hotline > .part
{
float: right; width: 33%;
direction: rtl;
margin-right: 20px;
line-height: 50px;
font-size: 16px;
font-weight: bold;
}
#footer-hotline > .part:first-child
{
direction: ltr;
float: left;
margin-left: 20px;
}
Eli Gassert's answer should suffice for centering the nav
Source: http://jsfiddle.net/YZ2Uz/
Demo: http://jsfiddle.net/YZ2Uz/show
I am trying to make a 3 column layout with the 2 fixed width divs (floated left and right) and with a fluid center div that changes it's width according to display width. All of those are contained in a wrapper div.
The way that I went about doing this is by creating to divs with fixed width that are floated left and right a 3rd div that is positioned relative the wrapper div with margin right in order to leave place for the right div to show.
However the problem is that if the fluid div has content it overflows the right div, ignoring the margin-right style. Why does this happen?
It also seems that the 1111 get's preformatted for some odd reason.
The code:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden; position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="border: 1px solid #999; position: absolute; left: 160px; margin-right: 160px;"><p>111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
</div>
I recommend using two divs floated.
On the right one, place the middle and the right divs.
All that is done via floats:
HTML:
<div class="left">content for the left</div>
<div class="rightContainer">
<div class="right">right content</div>
<div class="middle">middle content</div>
</div>
CSS:
.left {
float: left;
width: 100px;
overflow: hidden;
min-height: 30px;
background: red;
}
.rightContainer {
float: none;
min-height: 30px;
overflow: hidden;
background: yellow;
}
.right {
float: right;
width: 100px;
overflow: hidden;
min-height: 30px;
background: blue;
}
.middle {
overflow: hidden;
min-height: 30px;
background: green;
}
example:
UPDATE: applied to your content: http://jsfiddle.net/2KXW5/1/
This can be solved by specifying the style word-wrap: break-word; for your center fluid div.
Browsers don't work well with word-wrapping. Anyways I hope this code brings some help:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden; position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
<div style="border: 1px solid #999; position: relative; left: 10px; margin-right: 160px; overflow:hidden; word-wrap: break-word; "><p>111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
</div>
First: paragraph elemements are block-level elements. Google it to learn more. So if you want it to not overlap with the other You must float it as well.
so include this in the header (or separate file - or inline if you want):
<style type="text/css">
p {
float:left;
}
</style>
Then rearrange your divs:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden;position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
<div style="border: 1px solid #999; display:block; margin-left:160px; margin-right: 160px;overflow:auto;"><p >111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
http://www.jsfiddle.net/Zn4BH/1/
HTML:
<div id="divOutput">
<h1>Output</h1>
<div id="divButtons">
<button>One</button>
<button>Two</button>
</div>
<textarea name="tarOutput" id="tarOutput">[Text]</textarea>
</div>
CSS:
#divOutput {
border: 2px solid #000;
background-color: #f90;
padding: 10px;
height: 300px
}
#divButtons {
border: 2px solid #000;
background-color: #fb0;
margin-top: 10px;
padding: 2px;
}
textarea {
margin-top: 10px;
width: 100%;
height: 100%; /* ??? Doesn't seem to work */
}
Take a look at this post: CSS 100% height with padding/margin