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/
Related
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;
}
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;
}
I have this JsFiddle, and I can not figure out why the buttons extend outside of the divs.
How can I get them to be inside of the divs?
Here is the CSS
.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 12px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
}
div.left-nav {
float: left;
width: 200px;
}
div.left-nav > div {
clear: both;
width: 100%;
border: solid 1px red;
}
Here is the HTML:
<div class="left-nav">
<div>new story
</div>
<div>My Stories
</div>
</div>
You can specify display:inline-block; on the buttons, so the div expands to hold the anchors completely.
.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 12px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
display:inline-block;
}
Fiddle
div.left-nav > div {
overflow: auto; /* removed clear: both; */
width: 100%;
border: solid 1px red;
}
div.left-nav > div > a {
display: inline-block;
}
http://jsfiddle.net/ZjvZu/10/
Hey hope this works for you : -
demo
<div class="left-nav">
<div class="btn">new story
</div>
<div class="btn">My Stories
</div>
CSS:-
.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 8px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
}
div.left-nav {
float: left;
width: 200px;
}
div.left-nav > div {
clear: both;
width: 100%;
border: solid 1px red;
}
.btn{
padding:8px 15px 8px 15px;
}
I have 4 pictures in a horizontal line. The first 3 pictures have a margin-right: 20px;. Except for the last pictures which has no margin at all. This is how I did it, which I feel could be done better:
.threeimg {
margin-right: 20px;
border: 1px solid #cfcfcf;
border-radius: 6px;
background-color: white;
padding: 8px; }
.lastimg {
border: 1px solid #cfcfcf;
border-radius: 6px;
background-color: white;
padding: 8px; }
Any way to clean this up? Please don't be too hard on me, I literally started learning HTML&CSS 3 days ago.
Do it like this: DEMO
CSS
.image {
margin-right: 20px;
border: 1px solid #cfcfcf;
width: 100px;
border-radius: 6px;
background-color: white;
padding: 8px;
}
.no-margin {
margin-right: 0;
}
HTML
<img src="http://goo.gl/UEZSH" class="image">
<img src="http://goo.gl/UEZSH" class="image">
<img src="http://goo.gl/UEZSH" class="image">
<img src="http://goo.gl/UEZSH" class="image no-margin">
EDIT
Note: The .no-margin class should be below the .image class because of the cascading nature of CSS
I always try to write my code simple as it's possible, especially the html code. Cooperation with backend coder will be easier. I remove class no-margin and use first-child atribute. The code is below, try it.
CSS
.image {
margin-left: 20px;
border: 1px solid #cfcfcf;
width: 100px;
border-radius: 6px;
background-color: white;
padding: 8px;
}
.image:first-child {
margin-left: 0;
}
HTML
<img src="http://goo.gl/UEZSH" class="image">
<img src="http://goo.gl/UEZSH" class="image">
<img src="http://goo.gl/UEZSH" class="image">
<img src="http://goo.gl/UEZSH" class="image">
DEMO
http://jsfiddle.net/ppqCD/
Use the css pseudo-class selectors
img {
margin-right: 20px;
border: 1px solid #cfcfcf;
border-radius: 6px;
background-color: white;
padding: 8px;
}
img:last-child {
margin-right:0px;
}
.img {
margin: 0;
border: 1px solid #cfcfcf;
border-radius: 6px;
background-color: white;
padding: 8px;
}
.threeimg {
margin-right: 20px;
}
We have more example here.
http://www.html5database.com/example-css.php
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>