This is very odd to me, and although I've searched, everyone seems to have the opposite problem to me (a floated div shrinking)!
I have this page: http://www.tameside.gov.uk/test/news, which uses PHP to generate the divs at the top for various news stories, and it works fine. However the items (which are floated divs) are in a div which is floated left, which for some reason isn't shrinking to those items (which are it's only contents).
As far as I was aware, a floated div always shrunk to it's contents, but this particular one is expanding to 100% of the page it seems. I've coloured the background of the containing div in grey to show you what I mean.
I want it to shrink to the contents so that I could use a centering trick, and it would then center the div no matter how many divs are in the top news items. But because it's not shrinking, the trick obviously isn't working.
The CSS for each of the news item divs is below:
.news-top-item {
border-radius: 10px;
border-color: #3f7dae;
border-style: solid;
border-width: 2px;
float: left;
width: 19%;
text-align: center;
margin-right: 0.5%;
height: 13em;
padding-top: 0.5em;
cursor: pointer;
position: relative;
}
They've also got a span inside that has a little CSS attached to it to make the whole thing a link:
.news-top-item span {
display: inline;
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 2;
background-image: url('/tmbc_images/include/1pixel.gif');
cursor: pointer;
}
I doubt that's interfering, but have put it in just in case.
The outer div has only 'float: left' and the background colour applied to it.
Any help would be much appreciated.
Thanks,
James
You shall remove float:left and use display:inline-block instead
.news-top-item {
border-radius: 10px;
border-color: #3f7dae;
border-style: solid;
border-width: 2px;
display:inline-block;
width: 19%;
text-align: center;
margin-right: 0.5%;
height: 13em;
padding-top: 0.5em;
cursor: pointer;
position: relative;
}
And add text-align:center in your containing div
width:100%;
height:100%;
is 100% of windows size ...
Try
width:auto;
height:auto;
use absolute units instead of percentages to define measurements for the inner elements:
.news-top-item {
border-radius: 10px;
border-color: #3f7dae;
border-style: solid;
border-width: 2px;
float: left;
width: 200px; /* <--- */
text-align: center;
margin-right: 2px; /* <--- */
height: 13em;
padding-top: 0.5em;
cursor: pointer;
position: relative;
}
Related
In this simplified example I have 4 circles, each with varying border-width and I am trying to maintain equal line height in each to keep them horizontally aligned.
However the border width seems to effect the line height (despite being technically outside the box?)
Is there anyway to solve this without manually adjusting each line-height?
width: 50px;
height: 50px;
border-radius: 50px;
border: 1px solid #1daeec;
line-height: 50px;
Example: http://jsfiddle.net/vcJ3G/
You can remove the line-height, use display:table-cell instead, and add vertical-align:middle; to your stat class.
jsFiddle example
.stat {
display: table-cell;
width: 50px;
height: 50px;
border-radius: 50px;
border: 1px solid #1daeec;
text-align: center;
margin: 10px;
font-size: 16px;
color: #1daeec;
text-transform: uppercase;
vertical-align:middle;
}
Your css works fine all you have to do is remove some from top section
* {
margin: 0px;
padding: 0px;
}
http://jsfiddle.net/techsin/vcJ3G/15/
Came across this and thought myself how is it possible to do it without using table-cell, my solution probably not the best, but I just decide to share it anyway.
http://codepen.io/svdovichenko/pen/rObzqM?editors=110
adding <span>1</span> (can use class inside spam didn't use for this example)
.stat{
position: relative;
}
and
span {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
I have a parent div (nav) that is 1000px. Within that there is a child div (nav-drop-panel), and within that one another child (drop-panel-col). Basically, the drop-panel-col is a list of links in navigation. As there is a specific height, I can only add so many links before adding another column (so there's 1-4 drop-panel-col divs within nav-drop-panel).
I want the nav-drop-panel div to size itself according to the number of columns within it. So if there's only one, it's smaller than if there's 4. It will never exceed or even come close to the 1000px width of its parent div (nav). For some reason, if I don't set nav-drop-panel to a specific width (which makes it too big for one column), it assigns itself an arbitrary width and all of my columns are pushed down and it looks terrible.
I've tried a few solutions to other related questions from here, but nothing has worked so far.
My HTML:
<div class="nav-drop-panel">
<div class="drop-panel-col">
<a class="cat">Vehicle Graphics</a>
Pick-Up Truck
Van
Enclosed Trailer
Box Truck
SUV
Car
Boat
Bus
ScratchGuard™ Magnets
Vinyl Lettering and Graphics
<p></p>
</div>
</div>
My CSS:
#nav {
padding: 0;
margin: 0;
list-style: none;
width: 1000px;
z-index: 15;
font-family: Verdana,Arial,Helvetica,sans-serif;
/* position: absolute;
left: 0px;
top: 0px; */
}
#nav .nav-drop-panel {
background-color: #FFFFFF;
border-bottom: 3px solid #BBBBBB;
border-bottom-right-radius: 10px;
border-right: 3px solid #BBBBBB;
height: 431px;
margin-bottom: 0;
padding-bottom: 7px;
padding-top: 19px;
/* position: absolute;
top: -5px;
left: 218px; */
}
#nav .drop-panel-col {
color: #333333;
float: left;
font-family: Arial;
font-size: 14px;
padding-left: 24px;
}
#nav .drop-panel-col a{
color: #333333;
display: block;
font-weight: bold;
height: 19px;
margin-bottom: 5px;
margin-left: -4px;
padding-left: 30px;
padding-top: 0;
width: 202px;
}
Greatly appreciate any help or ideas, thanks. :)
EDIT: Just showing what I did to remove the positioning. I had just commented it out to see if it would at least expand, and work from there.
Absolutely-positioned elements are no longer part of the layout. The parent element has no idea where, or how large they are.
You need to use JavaScript to calculate all of this an adjust the size of the parent accordingly... or use a layout that doesn't use absolute positioning.
Adding display: inline-block; to .nav-drop-panel seemed to do the trick; I've also reduced the printed code slightly(margin-left, margin-top, etc reduced to margin: etc etc etc etc;). To see your unaltered, but working(as in just with the display: inline-block; added) version, click here.
On my webpage over at http://www.replyonline.co.uk/avaya/16312_UC_ms/costs/index.html you will see a twitter div named #twitter.
As you can see, it looks out of position and needs to be after the 4 #about divs to the left of it, but also needs to line up with the others. It looks pushed down currently.
I've fiddled with the CSS but haven't had any luck.
Here's the CSS for the about boxes and the twitter box:
#about{
width: 260px;
min-height: 140px;
float: left;
margin: 0 35px 10px 0;
background: url(../images/about_grad.jpg) bottom right;
display: block;
}
#twitter{
float: right;
width: 260px;
margin-bottom: 20px;
height: 290px;
overflow: auto;
font-size: 11px;
background: #ececec;
}
Thanks
I added a wrapper div (no styling) around the a linked items and removed the float:right attribute of the twitter box - that seemed to work.
Just remove float: right from #twitter.
I am trying to vertically center one div (containing a search bar) inside another (a top banner). I was under the impression that to do so you did the following:
#banner {
height: 35px;
width: 100%;
}
#searchbar {
height: 15px;
position: relative;
top: 50%;
margin-top: -7.5px; /* half of the height */
}
This works fine until you add the margin-top at which point it is applied to the #banner as well.
Is there an alternative way to do this, or am I just doing it wrong?
Here's a jsFiddle of my actual code.
I use line-height with the value being the same as height of parent div.
As seen here: http://jsfiddle.net/vkJ78/24/
CSS:
#banner {
background-color: #770E17;
height: 35px;
width: 100%;
border-bottom: 1px solid #333;
}
#src {
width: 300px;
height: 15px;
border: 1px solid #333;
padding: 3px;
}
#srcdiv {
width: 308px;
margin: 0px auto;
position: relative;
line-height: 35px;
}
EDIT: Per recommendation from NGLN, this will also fix horizontal centering, #srcdiv and #src having equal widths.
You have to add overflow: hidden to #banner. To clear the float, I guess.
Then, modify the negative margin to margin-top: -11px in #srcdiv (you have to sum the div height, the border, and the padding for the total height)
http://jsfiddle.net/vkJ78/1/
Give margin:0px and padding:0px and remove margin-top
body {
margin:0px;
padding:0px;
}
I have a similar problem to this question Why does my floated left div go to the next line in IE6 using the 960.gs?
In my design, the subcategories should be 4 per row. They look fine in FF,Safari,Chrome, but in ie6 they only show 3 per row. I tried creating a different css for ie6, but it didnt work, also i tried reducing the width and padding of each row, but still i have 3 subcategories per row.
I asked again because i bet the solution can be very specific to the css you have.
try setting width of each .subcategory at 24% or max 237px
.subcategory
{
width:24%;
}
updated
in category.css change in this way:
.subcategory {
FLOAT: left; MARGIN-BOTTOM: 15px; WIDTH: 24%; HEIGHT: 230px; TEXT-ALIGN: center
}
.category-item-image {
DISPLAY: block; BACKGROUND: #fff; MARGIN: 5px 30px; WIDTH: 170px; PADDING-TOP: 5px; HEIGHT: 170px; oveflow: hidden
}
.subcategory-image {
DISPLAY: block; BACKGROUND: #fff; MARGIN: 5px 30px; WIDTH: 170px; PADDING-TOP: 5px; HEIGHT: 170px; oveflow: hidden
}
Problems are
MARGIN: 5px 34px;
and
WIDTH: 25%;
I've tried to set them at 30px and 24% and in IE6 it works!