How can I get the bottom box of the lefthand side to fill out the rest of the height of the div so the border goes down to the bottom of the box?
Right now the line stops where the content of the left box stops
HTML
<div id="container">
<div id="leftcolumn">
<div id="fixedbox">
Fixed size
</div>
<div id="restbox"><p>Fill out box</P></div>
</div>
<div id="rightcolumn">
<p>Dynamic content</p>
</div>
<br style="clear:both;" />
</div>
CSS
body {
background-color:#ccc;
}
#container {
margin:0 auto;
width:80%;
background-color: #fff;
}
#leftcolumn {
width:29%;
float:left;
border-right:1px solid #000;
}
#rightcolumn {
width:68%;
float:left;
margin-left: 2%
}
#fixedbox {
width:100%;
height:200px;
border-bottom: 1px solid #000;
}
#restbox {
width:100%;
}
http://jsfiddle.net/P6YQc/2/
Is there any reason why you don't have a left border on #rightcolumn instead of a right border on #leftcolumn ?
http://jsfiddle.net/P6YQc/7/
eg:
#leftcolumn {
width:29%;
float:left;
}
#rightcolumn {
width:68%;
float:left;
border-left:1px solid #000;
padding-left:10px;
box-sizing: border-box;
}
Related
I have two rows like this
<div class="container me">
<div class="message">
</div>
<div class="time">
</div>
</div>
<br />
<div class="container he">
<div class="message">
</div>
<div class="time">
</div>
</div>
with css like this
* {
padding:0;
margin:0;
}
.container {
width:500px;
height:50px;
outline:1px solid green;
}
.message {
width:250px;
height:50px;
border:1px solid red;
display:inline-block;
border-radius:5px;
position: relative;
}
.time {
width:50px;
height:50px;
background:orange;
}
.container.me .time {
float:right;
}
.container.he .time {
float:left;
}
and i am trying to make message block full possible width (100% minus time block), is it possible?
jsfiddle https://jsfiddle.net/Nerfair/t0t0q632/5/
You can set width for .message to width: calc(100% - 52px); - this 52px is a width of your .time div (50px) + 2px for borders of .message (left and right)
Edit: For IE8 support you cannot use that, so you can try the tricky thing like this: https://jsfiddle.net/L2pqhnsq/
How do you apply margin on floating elements? I'm trying to center this 3 boxes and add spaces between them.
<div id="background">
<div class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
<div>
</div>
CSS:
#background
{
width:530px;
height:160px;
background-color:gray;
overflow:hide;
padding:5px;
}
.box
{
background-color:white;
width:160px;
height:150px;
float:left;
margin:auto;
border: 1px solid blue;
}
link on jsfiddle below.
[1]: http://jsfiddle.net/P63Sw/
Bit changes in your css code,
#background {
width:530px;
display: table-cell; <!--just to make it appear as a table-cell so than we can use vertical align and text-align on it-->
vertical-align:middle; <!--just to align in the middle vertically-->
height:160px;
background-color:gray;
overflow:hide;
padding:5px;
text-align: center; <!--will align it horizontally center-->
}
.box {
background-color:white;
width:160px;
display: inline-block;
height:150px;
border: 1px solid blue;
}
I have the following alignment problem: I want the "random" div to have a full width in the window, that's why I added the "width:100%" command. But for some reason, the maximum width it displays the random div on is the width of the "fixedwidth" div, but the two are not connected. Why does the browser keep matching the maximum width of the two divs? If i increase the width of the "fixedwitdth" div, then the width of the "random div" also increases. But that does not make any sense.
<html>
<head>
<title>Gliga's BBC</title>
<style type="text/css">
body {
margin:0px;
font-family: arial,helvetica;
}
#topbar {
background-color:#7A0000;
width:100%;
height:40px;
color:white;
}
.fixedwidth {
width:1200px;
background-color:green;
margin:0 auto;
}
#logodiv {
padding-top:7px;
padding-bottom:3px;
padding-left:50px;
float:left;
border-right: 2px solid #990000;
padding-right:30px;
}
#signindiv {
font-weight:bold;
padding:9px 80px 11px 20px;
font-size:0.9 em;
float:left;
border-right: 2px solid #990000;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
margin:0;
padding:0;
}
#topmenudiv li {
list-style:none;
font-weight:bold;
font-size:0.9 em;
border-right: 2px solid #990000;
height:100%;
padding:10px 20px 10px 20px;
float:left;
}
#searchdiv {
float:left;
padding:6px 10px 5px; 5px;
border-right: 2px solid #990000;
}
#searchdiv input{
height:20px;
}
.break {
clear: both;
}
.random {
background-color:blue;
margin-top:10px;
height:30px;
width:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png"/>
</div>
<div id="signindiv">
Sign in
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPLayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search..." />
<div>
</div>
</div>
<div class="break" />
<div class="random">
</div>
</div>
</body>
</html>
.random is a child of .fixedwidth, so it's a totally normal behaviour happening there.
If you sort your code properly then you will get to see it clearly:
I'm currently developping a website and encountered a problem with CSS.
I have a parent div containing 2 or more children: one containing the name of a user that sits on top of the other children, and just below 1 or more side by side divs which display items owned by the user.
At the moment it works fine, but if the user's name (top div) is larger than the total width of the divs below, it will expand the parent div.
I'd like to only allow the bottom divs to expand the parent div and make the title div use the full parent div's width without being able to make it larger.
I created a fiddle about it: http://jsfiddle.net/mLxjL/2/
HTML:
<div class="matches">
<div class="match-container">
<div class="user-match-container">
<div class="match-owner user">You</div>
<div class="match">
<div class="thumbnail">
<img class="image-container" src="img-path">
<div class="thumbnail-count">2</div>
</div>
<div class="item-name">The Zeppelin of Consequence (Trading Card)</div>
</div>
</div> <span class="arrow">→</span>
<div class="user-match-container">
<div class="match-owner friend">PfaU- [W] King Arthurs Gold</div>
<div style="clear:both;"></div>
<div class="match">
<div class="thumbnail">
<img class="image-container" src="img-path">
<div class="thumbnail-count">2</div>
</div>
<div class="item-name">The Lost Hobo King</div>
</div>
</div>
</div>
</div>
CSS:
.match-container:before, .match-container:after {
content:"";
display:table;
}
.match-container:after {
clear:both;
}
.match-container {
border:1px solid #666;
background-image:url('img/stripes.png');
border-radius:5px;
padding:10px;
margin:10px;
float:left;
}
.match {
width:112px;
float:left;
margin: 0 2px;
}
.match .image-container {
width:112px;
height:130px;
display:block;
}
.match .item-name {
line-height:12px;
font-size:10px;
margin-top:4px;
text-align:center;
height:24px;
overflow:hidden;
clear:both;
}
.match-container .arrow {
float:left;
position:relative;
top:70px;
margin:5px;
}
.match-owner {
line-height:14px;
font-size:12px;
margin-top:4px;
text-align:center;
height:14px;
overflow:hidden;
margin-bottom:4px;
border:1px solid #666;
background-image:url('img/stripes.png');
border-radius:5px;
}
.match-owner.user {
background-color:green;
}
.match-owner.friend {
background-color:red;
}
.thumbnail-count {
position:relative;
top:-24px;
margin-bottom:-24px;
font-size:16px;
font-weight:bold;
border-top:1px solid white;
border-right:1px solid white;
border-top-right-radius: 7px;
font-size:18px;
background: rgb(160, 160, 160) transparent;
background: rgba(160, 160, 160, 0.70);
padding: 0 4px;
float:left;
}
.user-match-container {
float:left;
}
Is it possible to do this without using JavaScript?
You can use Absolute positioning
FIDDLE
position:absolute;
top:0;
left:0;
width:100%;
and on the container div :
padding-top: /*the height of the absolutly positioned child*/ ;
position:relative;
If you add the following styles you should achieve what you want:
.user-match-container {
position: relative;
padding-top: 22px;
}
.match-owner {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
top: 4px;
left: 0;
right: 0;
}
Example
Please refer to this handy diagram I drew:
div1's height is unknown. div3's width is fluid; it should never overlap div2. Both div1 and div2 have the same width and are horizontally centered via margin: auto. How can I position div3 so that it aligns to the right side of body (no matter how wide body is) while sharing vertical position with div2? (Using CSS)
.div1{
margin:0 auto;
width:100px;
height:50px;
border:5px solid #995555;
}
.div2{
width:100px;
margin:0 auto;
border:5px solid #aaaa55;
height:200px;
}
.div3{
float:right;
width:50px;
height:100px;
border:5px solid cyan;
}
<div class="div1">div1</div>
<div class="div3">div3</div>
<div class="div2">div2</div>
Demo also at http://jsfiddle.net/XjC9z/1/
Like this?
HTML:
<div id='container'>
<div id='first'>1</div>
<div id='second'>2</div>
<div id='third'>3</div>
</div>
CSS:
#container{
width: 100px;
margin:0 auto;
}
#first{
border: 1px solid #ff55ff;
}
#second{
border: 1px solid #55ff77;
}
#third{
border: 1px solid #448855;
}
#first,
#second{
width: 50px;
clear:both;
float:left;
}
#third{
clear:none;
float: left;
}
See this fiddle:
http://jsfiddle.net/zaNvR/1/
A simple div grid would do the trick:
http://jsfiddle.net/NUGPv/
<div class="con">
<div class="lft">div 1</div>
<div class="rgt"></div>
</div>
<div>
<div class="lft">div 2</div>
<div class="rgt">div 3</div>
</div>
.con { overflow:hidden; }
.lft { width:100px; height:100px; float:left; }
.rgt { width:100px; height:100px; float:left; }
Simply leave the the top right cell empty.