I got a menu to the left and a header up there. Then I got a black box to the right that is supposed to fill all of the remaining space to the right but the problem is that the black box doesn't float next to the menu, it floats left UNDER the menu. I would appreciate if someone could help me out with this.
JS: http://jsfiddle.net/GrXLa/1/
CSS:
body {
background-color: #ececec;
font-family: calibri;
font-size: 13px;
margin: 0;
padding: 0
}
.header {
min-height: 54px;
background-color: #4d7496;
font-size: 15px;
border-radius: 0;
margin: 0;
padding-right: 20px;
border-bottom: 4px solid #2a4053;
}
.sidebar {
width: 240px;
background-color: #f9f9f9;
position: absolute;
top: 58px;
left: 0;
min-height: 100%;
z-index: 10;
border-right: 1px solid #d1d1d1;
}
.sidebar .left_menu {
width: 180px;
padding: 15px 30px;
float: left;
background-color: #f9f9f9;
border-bottom: 1px solid #ebebeb;
color: #555555;
text-decoration: none;
}
.sidebar .left_menu:hover {
width: 177px;
background-color: #fdfdfd;
border-right: 3px solid #668eb0;
cursor: pointer;
}
.header_menu {
height: 14px;
padding: 20px;
color: #ffffff;
margin-right: -1px;
border-right: 1px solid #3d5c78;
border-left: 1px solid #3d5c78;
border-bottom: 4px solid #2a4053;
float: right;
}
.header_menu:hover {
background-color: #557a9a;
cursor: pointer;
}
.content {
width: 100%;
min-height: 100%;
background-color: #000;
color: #fff;
padding: 20px;
margin: 20px 0 20px 20px;
float: left;
border: 1px solid #000;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
text-align: center
}
.content h2.title {
font-size: 21px;
color: #efefef;
text-align: left;
margin-top: -5px;
border-bottom: 1px solid
}
.signin h2.title {
font-size: 21px;
color: #efefef;
text-align: left;
margin-top: 10px;
border-bottom: 1px solid
}
HTML:
<body>
<div class="header">
<img src="theme/default/images/logo.png" style="padding: 10px;"/>
<div class="header_menu"><img src="theme/default/images/lock.png" style="margin-right: 10px;" /> Logout</div>
<div class="header_menu"><img src="theme/default/images/user.png" style="margin-right: 10px;" />Edit Account</div>
</div>
<div class="sidebar">
<div class="left_menu"><img src="theme/default/images/home.png" style="margin-right: 10px;" />Dashboard</div>
<div class="left_menu"><img src="theme/default/images/coin.png" style="margin-right: 10px;" />Add Funds</div>
<div class="left_menu"><img src="theme/default/images/withdraw.png" style="margin-right: 10px;" />Withdraw Funds</div>
<div class="left_menu"><img src="theme/default/images/cart.png" style="margin-right: 10px;" />Place Order</div>
<div class="left_menu"><img src="theme/default/images/order.png" style="margin-right: 10px;" />My Order</div>
<div class="left_menu"><img src="theme/default/images/star.png" style="margin-right: 10px;" />Change Membership</div>
</div>
<div class="content">
<h2 class="title">Add Funds</h2>
</div>
Your problems are, that you
position the menu absolute, which takes it out of the "normal flow"
additionally set the content div to width: 100%
float the content div
So the solution is to avoid all of the above and simply give the content element a left margin of the width of the menu (in your case 240px). That's it ...!
Here is your updated JSFiddle.
Basicly, if you want an element aside a floatting element to use all space left avalaible, it should not float, it will by defaut use all width avalaible as a block element does.
To keep aside and not wrap belo or lay under the floatting element, you need to trigger its layout.
overflow:hidden; , here in this case will do the job. .content will mind floatting element inside it and outside it. Do not give it any width or height, there is no need. eventually a min-height can be used. DEMO
.content {
overflow:hidden;
min-height: 100%;/* this works if parent has an height set */
background-color: #000;
color: #fff;
padding: 20px;
margin: 20px 0 20px 20px;
border: 1px solid #000;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
text-align: center
}
Inside .content, image can or should be set to max-width:100%.
Beside , the absolute positionning comes out of the flow and is therefor not seen by other element of the page. Keep side bar floatting in the flow.
DEMO
.sidebar {
width: 240px;
background-color: #f9f9f9;
/* Useless without positionning
top: 58px;
left: 0;
min-height: 100%;
z-index: 10;*/
border-right: 1px solid #d1d1d1;
float: left;/* make it float in the flow*/
}
.sidebar .left_menu {
width: 180px;
padding: 15px 30px;
background-color: #f9f9f9;
border-bottom: 1px solid #ebebeb;
color: #555555;
text-decoration: none;
}
Related
I want curves at the top left and top right corners of my div. I tried border-top-left-radius and border-top-right-radius but it doesn't seem to be working.
HTML:
<div id="trape"></div>
CSS:
#trape{
border-bottom: 100px solid red;
border-left: 0 solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
border-top-left-radius:5px;
border-top-right-radius:10px;
}
I want output something like shown in the below image
You can use border-top-left-radius and border-top-right-radius css like this :
#trape{
background-color: #E0E0E0;
border-left: 0 solid transparent;
border-top-left-radius: 2em;
border-top-right-radius: 10em;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
width: 200px;
}
#trape{
background-color: #E0E0E0;
border-left: 0 solid transparent;
border-top-left-radius: 2em;
border-top-right-radius: 10em;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
width: 200px;
}
<div id="trape">Abstract Murals</div>
Hope it helps :)
This will solve your problem..
.wrapper {
padding: 15px;
background: #f0f0f0;
}
.block {
width: 200px;
height: 80px;
padding: 25px;
background: #fff;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
}
<div class="wrapper">
<div class="block">
Your content goes here
</div>
</div>
I'm making a 'topic' design, and I am having issues again. I have a floating div (to the left) inside a container div and it's going outside of it's boundries. It's dynamic, so setting a height: property will not suffice. Now I know it's the float: left; that's causing it, but how can I try fitting in it? I tried setting outer div to display: table; which works, but then it doesn't set the other div next to the floating one to fill the width.
html:
<div class="reply-wrapper">
<div class="reply-box">
<div class="reply-header">
<span id="post-id">#1</span>
<span id="post-date">Today, 12:08</span>
</div>
<div class="reply-main">
<div class="user-info">
<div class="username-wrap">
<span id="username">Jakes625</span>
<!-- img online or not? -->
</div>
<span id="usertitle">Admin</span>
<ul class="user-stats">
<li>Posts: 99</li>
<li>Rep: 99</li>
<li>Likes: 99</li>
</ul>
</div>
<div class="reply-data">
<div class="reply-post">
<h2>Post Title</h2>
<p>
So this is some text that goes in a post.
</p>
</div>
<div class="reply-signature">
This is an example signature.
</div>
</div>
</div>
<div class="reply-footer">
<span class="reply-button">Reply With Quote</span>
</div>
</div>
</div>
css:
.reply-wrapper{
background-color: #DDD;
border-radius: 6px;
padding: 6px;
font: normal 12px arial, helvetica, sans-serif;
color: #333;
}
.reply-box{
border: 1px solid #c6c6c6;
border-radius: 4px;
margin-bottom: 30px;
}
.reply-box:last-child{
margin-bottom: 0;
}
.reply-header{
background-color: #474747;
border-bottom: 1px solid #c6c6c6;
border-radius: 4px 4px 0 0;
padding: 4px;
color: #FFF;
}
.reply-header #post-id{
float: right;
}
.reply-main{
background-color: #ebebeb;
}
.reply-main .user-info{
width: 180px;
float: left;
background-color: #e5e5e5;
border-right: 1px solid #c6c6c6;
padding: 10px;
}
.reply-main .reply-data{
margin-left: 200px;
margin-right: 0px;
}
.user-info .username-wrap,.user-info #usertitle{
text-align: center;
display: block;
text-align: center;
}
.username-wrap #username{
font-size: 11pt;
}
.user-stats{
margin: 0;
padding: 0;
list-style-type: none;
margin: 10px 0 10px 0;
}
.user-stats li{
background: #f2f2f2 none;
color: #3e3e3e;
border: 1px solid #c6c6c6;
margin-bottom: 3px;
padding: 4px;
line-height: 20px;
}
.reply-post{
padding: 10px;
}
.reply-post h2{
margin: 0;
padding: 0;
border-bottom: 1px solid black;
}
.reply-signature{
border-top: 1px solid #c6c6c6;
padding: 10px;
}
.reply-footer{
padding: 4px;
height: 15px;
background-color: #d8d8d8;
border-top: 1px solid #c6c6c6;
}
.reply-footer .reply-button{
float: right;
}
PAGE SOURCE: http://jakes625.toomanylols.com/thread.html
change:
.reply-main .user-info{
width: 180px;
float: left;
background-color: #e5e5e5;
border-right: 1px solid #c6c6c6;
padding: 10px;
}
.reply-main .reply-data{
margin-left: 200px;
margin-right: 0px;
}
to:
.reply-main .user-info{
width: 180px;
display: inline-block;
background-color: #e5e5e5;
border-right: 1px solid #c6c6c6;
padding: 10px;
}
.reply-main .reply-data{
margin-left: 200px;
margin-right: 0px;
display: inline-block;
}
This will display both divs side by side, while stretching the outer div to make them fit. If what you want is the contrary (make the div's height equal the outer div's height, regardless of it's content) then the other posted answer is what you're looking for
jsfiddle here
Overflow hidden the reply-wrapper part (the outter container)
CSS
.reply-wrapper {
background-color: #DDDDDD;
border-radius: 6px 6px 6px 6px;
color: #333333;
font: 12px arial,helvetica,sans-serif;
padding: 6px;
overflow: hidden;
}
or
.reply-main {
background-color: #EBEBEB;
overflow: hidden;
}
Why is the overflow:auto; on .pageContent breaking the layout in Chrome and Firefox? It works great in Safari. How can I go about fixing it? I added it so the clear:both; on the h2 would only clear the content and not the whole .pageAttributes div too.
Here is the site.
It looks like its the border-bottom on .selected from the menu thats causing it. Still not sure why though.
Update - Test case jsfiddle
I've tried overflow: visible; but that breaks the h2.
HTML
<div class="page">
<div class="pageAttributes">
.pageAttributes
</div>
<div class="pageMenu">
<div class="button">View</div>
<div class="button selected">Edit</div>
<div class="button">Talk</div>
<div class="search">Search:
<input type="text" id="searchItem">
</div>
</div>
<div class="pageContent">
<h2>header</h2>
.pageContent
<div class="pageFooter"></div>
</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.page {
width: 1010px;
padding: 0 5px 0 5px;
margin: 0 auto 30px auto;
}
.pageAttributes {
float: left;
width: 245px;
height: 250px;
margin-bottom: 20px;
background-color: #ccc;
}
.pageMenu {
clear: right;
margin-left: 250px;
height: 25px;
margin-bottom: -1px;
border-bottom: 1px solid #a7d7f9;
padding-left: 1px;
padding-right: 1px;
}
.pageMenu .button {
float: left;
margin-left: -1px;
height: 24px;
border-top: 1px solid #a7d7f9;
border-left: 1px solid #a7d7f9;
border-right: 1px solid #a7d7f9;
padding-left: 15px;
padding-right: 15px;
text-align: center;
line-height: 25px;
font-family: sans-serif;
font-size: 13px;
cursor: pointer;
}
.pageMenu .button.selected {
background-color: white;
border-bottom: 1px solid white;
cursor: default;
}
.pageMenu .search {
float: right;
margin-right: -1px;
height: 24px;
border-top: 1px solid #a7d7f9;
border-left: 1px solid #a7d7f9;
border-right: 1px solid #a7d7f9;
padding-left: 15px;
padding-right: 15px;
text-align: center;
line-height: 25px;
font-family: sans-serif;
font-size: 13px;
cursor: default;
}
.pageContent {
position: relative;
border: 1px solid #a7d7f9;
margin-bottom: 5px;
padding: 5px;
background-color: white;
line-height: 1.5em;
overflow: auto;
clear: right;
margin-left: 250px;
}
.pageContent h2 {
margin-top: 25px;
margin-bottom: 3px;
font-size: 16px;
border-bottom: 1px dotted #CCC;
clear: both;
}
Try this,
#articleSections{
float: left;
}
and remove the overflow: auto; from .pageContent
to me it seems to be a floating problem wich I could not clear between the .button(s) and the search input. so positioning could be a solution like this
fiddle http://jsfiddle.net/LNMH9/3/
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.page {
position:relative;
width: 1010px;
padding: 0 5px 0 5px;
margin: 0 auto 30px auto;
}
.pageAttributes {
position:absolute;
left:0px;
top:0px;
width: 245px;
height: 250px;
margin-bottom: 20px;
background-color: #ccc;
}
.pageMenu {
margin-left: 250px;
height: 25px;
margin-bottom: -1px;
border-bottom: 1px solid #a7d7f9;
padding-left: 1px;
padding-right: 1px;
}
.pageMenu .button {
float: left;
margin-left: -1px;
height: 24px;
border-top: 1px solid #a7d7f9;
border-left: 1px solid #a7d7f9;
border-right: 1px solid #a7d7f9;
padding-left: 15px;
padding-right: 15px;
text-align: center;
line-height: 25px;
font-family: sans-serif;
font-size: 13px;
cursor: pointer;
}
.pageMenu .button.selected {
background-color: white;
border-bottom: 1px solid white;
cursor: default;
}
.pageMenu .search {
float: right;
margin-right: -1px;
height: 24px;
border-top: 1px solid #a7d7f9;
border-left: 1px solid #a7d7f9;
border-right: 1px solid #a7d7f9;
padding-left: 15px;
padding-right: 15px;
text-align: center;
line-height: 25px;
font-family: sans-serif;
font-size: 13px;
cursor: default;
}
.pageContent {
position: absolute;
width:748px;
border: 1px solid #a7d7f9;
margin-bottom: 5px;
padding: 5px;
background-color: white;
line-height: 1.5em;
overflow: auto;
clear: right;
margin-left: 250px;
}
.pageContent h2 {
margin-top: 25px;
margin-bottom: 3px;
font-size: 16px;
border-bottom: 1px dotted #CCC;
clear: both;
}
</style>
<div class="page">
<div class="pageAttributes">
.pageAttributes
</div>
<div class="pageMenu">
<div class="button">View</div>
<div class="button selected">Edit</div>
<div class="button">Talk</div>
<div class="search">Search:
<input type="text" id="searchItem" />
</div>
<div style="clear:both;"></div>
</div>
<div class="pageContent">
<h2>header</h2>
Lorem ipsum
<div class="pageFooter"></div>
</div>
</div>
I have got problem with positioning 2 divs inside a div. I want to have 2 divs next to each other but I dont know how. Here is my html
<div id="game">
<div id="choice" onmouseover="npcRoll()">
<p>Chosse your weapon!</p>
<button id="rock" onClick="choose(1)">Rock</button>
<button id="paper" onClick="choose(2)">Paper</button>
<button id="scissors" onClick="choose(3)">Scissors</button>
<p>You chose <span id="userChoice">none</span>!</p>
</div>
<div id="confirm">
</div>
</div>
And this is my CSS:
#choice {
border: 2px solid #87231C;
border-radius: 12px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
background-color: #FF5A51;
width: 350px;
}
#game {
border: 2px solid #fff;
border-radius: 15px;
background-color: white;
width: 500px;
margin: 0 auto;
}
#confirm {
border: 2px solid #00008B;
border-radius: 12px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
background-color: #1E90FF;
width: 142px;
height: 100px;
}
body {
background-color: #DFEFF0;
text-align: center;
}
button {
font-size: 22px;
border: 2px solid #87231C;
border-radius: 100px;
width: 100px;
height: 100px;
color: #FF5A51;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
padding-top: 36px;
}
button:active {
font-size: 22px;
border: 2px solid #328505;
color: #32A505;
border-radius: 100px;
width: 100px;
height: 100px;
padding-top: 36px;
}
You can check it out here how it looks. http://jsfiddle.net/VcU7J/
Thank you for any help!
EDIT: I also tried to add float elements into to the CSS but it screwed it more. :/
There are several ways to do this. The most traditional being to use CSS' float property your two divs:
CSS
#choice {
border: 2px solid #87231C;
border-radius: 12px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
background-color: #FF5A51;
width: 350px;
float:left;
}
#game {
border: 2px solid #fff;
border-radius: 15px;
background-color: white;
width: 500px;
margin: 0 auto;
/* this is needed to make sure your container background
"contains" your floated divs */
overflow:auto;
}
#confirm {
border: 2px solid #00008B;
border-radius: 12px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
background-color: #1E90FF;
width: 142px;
height: 100px;
float:left
}
fiddle
More on floats here
Use css floats to position divs next to each other, but do not forget to clear the floats after your done.
#game {
float:left;
}
#confirm {
float: right;
}
.clear {
clear: both;
}
and then the html would look like:
<div id="game">
<div id="choice" onmouseover="npcRoll()">
<p>Chosse your weapon!</p>
<button id="rock" onClick="choose(1)">Rock</button>
<button id="paper" onClick="choose(2)">Paper</button>
<button id="scissors" onClick="choose(3)">Scissors</button>
<p>You chose <span id="userChoice">none</span>!</p>
</div>
<div id="confirm">
</div>
<div class="clear"></div>
</div>
I'm trying to get two columns side by side (float left/right), but they both have dynamic text.
!
Link to code
<div class="news-item">
<div class="news-pic">
<a href="#">
<img src="" width="126" height="80" alt="">
</a>
</div>
<div class="news-description">
<h3>Long post title this is. What is this? this is a long post title. Even longer. (dynamic)</h3>
Longer category name (dynamic)
<div style="clear:both"></div>
<small><i>Published {{ post.published|date:"j. F Y" }}</i></small>
<p class="text-min">Blah blah body</p>
<div style="clear:both"></div>
</div>
<div style="clear: both"></div>
</div>
html, body {
font-size: 13px;
font-family: arial;
}
.news-item {
padding: 10px 10px 10px 10px;
border: 1px solid #f2f2f2;
cursor: default;
width: 658px;
margin: 10px 0 20px 0;
border-radius: 5px;
}
.news-pic {
display: inline-block;
vertical-align: top;
padding: 3px;
border: 1px solid #DADADA;
margin-right: 10px;
background: white;
}
.news-description {
margin-left: 0;
display: inline-block;
width: 510px;
}
.news-description h3 {
margin: 0;
float: left;
font-size: 15px;
}
.news-description h3 a {
text-decoration: none;
color: #137541;
}
.category-name {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
text-decoration: none;
padding: 1px 4px 1px 5px;
font-weight: bold;
border: 1px solid #dadada;
border-right: none;
background: rgba(215, 214, 214, .2);
color: #807f7f;
white-space: nowrap;
display: inline-block;
font-size: 10px;
margin-right: -11px;
z-index: 5;
float: right;
}
I'm trying to make the left main text "break" into a new line when it reaches the right category (which is also dynamic, so it can't be a static width). Is this at all possible with just CSS? Or do I have to reach for JS?
Thanks a lot! :)
Make sure that the text is not floated, and the button is both floated right and before the text in HTML
http://jsfiddle.net/vR3eE/4/