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
Related
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:
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;
}
In IE8, I am trying to display 4 child div's side by side withing a parent div. I would like the parent div to overflow and scroll horizontally and for the child div's to be next to each other horizontally as well. Thanks
HTML:
<div id="a">
<div class="b">One</div>
<div class="b">Two</div>
<div class="b">Three</div>
<div class="b">Four</div>
</div>
and CSS:
#a{
position:relative;
height:130px;
width:800px;
background:purple;
overflow:auto;
}
.b{
position:relative;
display:inline-block;
height:100px;
width:400px;
background:red;
border:1px solid #000000;
float:left;
}
Here are my suggestions:
Use classes for repeated elements. ids are unique, but classes can be used multiple times.
Use inline-block instead of float, not in addition.
Set white-space:nowrap on the container to prevent the children
from wrapping.
<div id="a">
<div class="b">One</div>
<div class="b">Two</div>
<div class="b">Three</div>
<div class="b">Four</div>
</div>
#a{
height:130px;
width:800px;
background:purple;
overflow:auto;
white-space:nowrap;
}
.b{
height:100px;
width:400px;
background:red;
border:1px solid #000000;
display:inline-block;
}
http://jsfiddle.net/X2Rjn/2/
http://cssdesk.com/exMH4 (for those who cannot see jsfiddle)
Here's a floated variant:
<div class="a">
<div class="wrapper">
<div class="b">One</div>
<div class="b">Two</div>
<div class="b">Three</div>
<div class="b">Four</div>
</div>
.a{
height: 130px;
width: 800px;
overflow: scroll;
background: purple;
}
.wrapper{
width: 1608px;
}
.b{
height: 100px;
width: 400px;
background: red;
border: 1px solid #000000;
float: left;
}
http://jsfiddle.net/BYLFn/3/
Using CSS, I want to horizontally center two "boxes" I have within a div. The boxes are absolutely positioned.
Here is the JSFiddle: http://jsfiddle.net/p4sA3/8/
How would I achieve this without using specific widths?
HTML:
<button id="change">Change</button>
<div id="total-wrap">
<div id="hello-wrap" class="bunch">
<div id="box">
<p> Hello, this is text1 </p>
</div>
<div id="box">
<p> Hello, this is text2 </p>
</div>
</div>
<div id="goodbye-wrap" class="bunch">
<div id="box">
<p> Goodbye, this is text1 </p>
</div>
<div id="box">
<p> Goodbye, this is text2 </p>
</div>
</div>
</div>
CSS:
#total-wrap {
border:1px solid #000;
height:500px;
}
#box {
position:relative;
display:inline-block;
width:300px;
height:100px;
background-color:yellow;
margin:10px;
}
.bunch {
position: absolute;
text-align:center;
}
I would do it with left:0; and right:0 as they are absolutely positioned.
DEMO http://jsfiddle.net/kevinPHPkevin/p4sA3/19/
.bunch {
position: absolute;
text-align:center;
left:0;
right:0;
}
Solution:
#total-wrap {
border:1px solid #000;
height:500px;
}
#box {
display:inline-block;
width:300px;
height:100px;
background-color:yellow;
margin:10px;
text-align:center;
}
.bunch {
text-align:center;
}
<div id="wrap">
<div id="left">Box1</div>
<div id="right">Box2</div>
</div>
#wrap {
background: #e7e7e7;
padding: 40px;
text-align: center;
width: auto;
}
#left, #right {
background: yellow;
display: inline-block;
padding: 20px;
}
Is this what you want?
#box {
position:relative;
display:inline-block;
width:100px;
height:100px;
background-color:yellow;
margin:10px;
}
DEMO: http://jsfiddle.net/p4sA3/11/
The thing is that as long the sum of the widths exceeds the container, the second div will be positioned beneath the first one
In this other demo I didn't use width: http://jsfiddle.net/p4sA3/13/
If you want to use jQuery:
Demo
keepCentered = function() {
$('#hello-wrap').css({'margin-left':($('#total-wrap').width()-$('#hello-wrap').width())/2});
$('#goodbye-wrap').css({'margin-left':($('#total-wrap').width()-$('#goodbye-wrap').width())/2});
}
$(document).ready(keepCentered);
$(window).bind('resize', keepCentered);