Here is my problem with CSS when I use the Float property
My picture: http://www.sourimage.com/show-image.php?id=fb748238bf7e4ab12001e64cb543066b
It does not look good because having many blank space among the block.
My CSS code:
.listcol{
width:180px;
float:left;
margin-right:5px;
background-color:#eceff1;
margin-top: 1px;
min-height:200px;
background-image: url(../images/colbg_btm.gif);
background-repeat: no-repeat;
background-position: bottom;
margin-bottom: 0px;
}
.listcol ul{
margin-left: 0px;
padding-left: 0px;
padding-top: 0px;
margin-top: 0px;
list-style-type: none;
}
Please take a look to review and help me to correct no any blank space on the screen!
Thanks so much!
Can't see the picture, but maybe if you express the width as a percentage of the width of the page...Instead of 180px, maybe
width: 80%;
..using whatever percentage looks best to you.
I think we need to see your html markup to be sure, but what you need to do is have a structure where block1 and block3 are in a container block. The container can float, and block2 can float. Block1 and block3 do not need to float.
can you post some of the html? Or fix the image? It looks like you took care of the left margin for your UL, but there may some extra margin lying around in some of your other block elements since they tend to come with built in margin.
i also agree with Robert Harvey. Try to use percentages where reasonable instead of pixels. it'll be more consistent across any changes the user or browser makes to screen size, font size, etc.
are block1, 2, and 3 all UL's in the listcol div?
I think u can solve your problem by giving line-height to li as "0px".
ul li {
float:left;
line-height:0px;
}
ul {
width:124px;
}
<ul>
<li><img src="images.jpeg" /></li>
<li><img src="images.jpeg" /></li>
</ul>
The space can't be avoided in current solution because it's the height of the block2 that's "pushing" down block3 when it's floated to to left.
So you will probably need a completelly different html layout to solve your request...
Please show us som more samples of how you want the page to look with more li elements of different heights.
Huynh:
You need to wrap a div around each of your columns. That should allow the boxes to flow from top to bottom within their own div, and then you can float each of the div columns. Give each div a width of 25%. You might also want to wrap the whole thing in a div, and give it a width of 100%.
I try to work around on your ideas but It's not fine.
Also, I put my HTML as below:
#content02{
width:740px;
float:left;
margin-left: 10px;
}
.wrapper{
width:760px;
margin-left:auto;
margin-right:auto;
}
.main02{
width:760px;
float:left;
background-color:#FFFFFF;
padding-bottom:20px;
padding-top: 10px;
}
.listcol{
width:180px;
float:left;
--position: absolute;
margin-right:5px;
background-color:#eceff1;
margin-top: 1px;
min-height:200px;
margin-bottom: 0px;
}
.listcol ul{
margin-left: 0px;
padding-left: 0px;
padding-top: 0px;
margin-top: 0px;
list-style-type: none;
}
.listheader{
display: block;
margin-top: 0px;
background-color: #2F404A;
color: #FFFFFF;
font-weight: bold;
font-size: 10px;
width: 180px;
padding-top: 5px;
padding-bottom: 5px;
background-position: top;
text-align: center;
}
<div class="wrapper">
<div class="main02">
<div id="content02">
<div class="listcol">
<ul>
</ul>
</div>
<div class="listcol">
<ul>
</ul>
.....
.....
</div>
Please to note that the number of block increasing dynamically and use the same style "listcol". You can see the picture depicting this issue here: http://www.sourimage.com/show-image.php?id=fb748238bf7e4ab12001e64cb543066b
Please try getting rid of "min-height" in the '.listcol'. Also, get rid og the "position: absolute" in the '.listcol'.
Let me know if that worked.
If it doesn't, you can try to modify your HTML to be in columns, so for example:
<div class="column">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="column">
<div class="box"></div>
<div class="box"></div>
</div>
And the CSS:
.column{
float: left;
width: 200px;
margin-right: 5px;
}
.box{
margin: 0px;
}
Related
I am currently coding my first website, and one of the elements I have are "story blocks" that are a fixed width and split between images and text, but all in one div. Here is an image for reference: http://i.imgur.com/FAbi4xF.jpg?1.
Let me explain the different parts going on here: an image with a slight black overlay as well as text on the left, and then text describing the story on the right. Currently, I have an inefficient way of creating this element, involving two separate divs and disparate headers for the story titles. Here is the HTML:
<div class="story-image">
<h2 class="story-head">STORY TITLE</h2>
<img src="http://gearpatrol.com/wp-content/uploads/2012/06/microsoft-surface-gear-patrol1.jpg"/>
</div>
<!--this ends the image and title part, begins the text part-->
<div class="story-text">
<h5>Story description.</h5>
</div>
And the CSS:
.story-image {
position: inherit;
background-color: rgba(0,0,0,.39);
margin-left: 58px;
margin-bottom: 4px;
float: left;
overflow: hidden;
width: 220px;
height: 100px;}
.story-head {
position: absolute;
text-align: center;
vertical-align: middle;
color: white;
font-weight: 800;
width:220px;
line-height:100px;}
.story-text {
background-color: white;
width: 200px;
line-height: 100px;
height:100px;
float: left;}
.story-text h5 {
padding-left:8px;
padding-top: 20px;
vertical-align: middle; }
As you can see, it isn't the most efficient way of doing this sort of thing and can cause issues where the two elements break away from eachother (example here: http://i.imgur.com/eBF8Rwa.png). I cannot figure out a way to have one single div that is divided between image and text. Does anyone know of a possible way to do this? Thank you and happy holidays!
Try this:
CSS
.container {
width:400px;
display:inline-block;
height:80px;
margin-right:10px;
padding:0;
}
.left {
display:table-cell;
vertical-align:middle;
width:120px;
margin:0;
padding:0;
height:80px;
background-image:url(URL);
background-size:100%;
}
.right {
display:table-cell;
vertical-align:middle;
width:280px;
padding:0 10px;
}
HTML
<div class="container">
<div class="left">tjen<br>a</div>
<div class="right">tjen<br>a</div>
</div>
JSFiddle demo.
The problem with the two elements becoming break appart in some situations should be gone, and you can change vertical-align:middle to top or bottom if you want the text to have a different position in the div. Hope this helps!
I feel really stupid for asking this because it seems so basic but for some reason the height of my container div is not expanding to accommodate the divs within. I'm building a customized page on Tumblr with my contact details (note: not on the index/permalink page but a separate page) and I've used divs as a sort of makeshift table because html table tags don't seem to work on customized pages on Tumblr.
[The style attributes for the container div (id: Post) is inherited from the ones for the Permalink pages.]
All relevant CSS taken from theme editor:
#cent{
background-color:#FFE5E5;
padding:5px;
position:static;
width:800px;
margin: 0px auto;
}
#post{
background-color:#fff;
border:10px ridge #ff0000;
float:none;
width:700px;
margin: 2px auto;
padding:10px;
}
.Division{
float: left;
width: 300px;
margin-left: 10px;
margin-bottom: 10px;
padding: 5px;
font-weight: bold;
}
.Division2{
float: left;
margin-left: 0px;
margin-bottom: 10px;
padding: 5px;
}
HTML on Contacts page:
<div id="cent">
<div id="post">
<div class="Division">Telephone Number:</div>
<div class="Division2">+6012-3456789</div>
<br/>
<div class="Division">E-Mail Address:</div>
<div class="Division2">sample#live.com.my</div>
<br/>
<div class="Division">Address:</div>
<div class="Division2">Line 1 <br />Line 2 <br />Line 3 <br />Line 4</div>
</div>
</div>
Oh and I made a fiddle thing here: http://jsfiddle.net/Yelrihs36/wkCQR/
So what exactly am I doing wrong? I feel like the answer is really easy and staring me right in the face and I'm going to kick myself when I find out what it is...
In this case I would recommend using a table. The div is being thrown off because of your float left statements.
The effect will be the same and it will be much easier to program and will be easier to understand if anyone else needs to see your code. I've spent many hours messing around with div, float, and display trying to make divs work like a table. I just don't think it's worth it sometimes.
I hope this helps.
You must change #post to float: left
#cent{
background-color:#FFE5E5;
padding:5px;
position:static;
width:800px;
margin: 0px auto;
}
#post{
background-color:#fff;
border:10px ridge #ff0000;
float:left;
width:700px;
margin: 2px auto;
padding:10px;
}
.Division{
float: left;
width: 300px;
margin-left: 10px;
margin-bottom: 10px;
padding: 5px;
font-weight: bold;
}
.Division2{
float: left;
margin-left: 0px;
margin-bottom: 10px;
padding: 5px;
}
corrected fiddle
I have this code:
<div class="outer">
<ul class="list">
<li class="inner">
<div class="line">information1</div>
<div class="line">hyperlink1</div>
</li>
<li>
<div class="line">information2</div>
<div class="line">hyperlink2</div>
</li>
<li>
<div class="line">information3</div>
<div class="line">hyperlink3</div>
</li>
<li>
<div class="line">information4</div>
<div class="line">hyperlink4</div>
</li>
</ul>
<input type="submit" id="send" value="send" class="button"/>
</div>
and the css:
.outer
{
display: table;
border: 1px solid;
padding: 5px;
}
.list
{
list-style: none;
padding: 5px;
}
.inner
{
display: table-row;
padding: 5px;
}
.line
{
display: table-cell;
border: 1px solid;
border-radius: 5px;
}
.button
{
top:50%;
left:50%;
}
the output is: this
Now i want to place the button in the center of the 'outer' div no matter what is the width.
example: i want the button to be in center even for: this. without having to change the css each time the div size changes. Even if the 'outer' div is dynamic, the button should be in the center.
thank you.
This achieves what you're looking for in a simple, succinct, way:
.button {
display:block;
margin: 0 auto;
}
You need to give the button a specific width and then you can use automatic margins
.button {
display: block;
margin: 0 auto;
}
http://fiddle.jshell.net/CrHyd/
There's more than one way to do this. I prefer using percentages like so:
input[type="submit"]{
min-width:20%;
max-width:20%;
margin:0% 39% 0% 40%; //margin-right = 39% to stop errors
}
Other people prefer a margin:auto approach but personally I've never found this to work. Other methods include using floats but I don't agree with this property as it mis aligns other elements in some browsers.
Using top and left will cause errors as you've not specified a position type other than default (static).
This should work
.outer {
display: inline-block;
text-align: center;
}
fiddle
Just change .button to this, using the margin property. (1 line fix)
.button
{
margin:0 auto;
}
Here's a Fiddle where I made the .outer a fixed width of 500px just to show an example of what margin does:
DEMO
I freely admit right up front that I am not blessed with even a speck of design ability. Nonetheless, I find myself hacking through CSS for a simple website. I've run into a problem and for the life of me I can't figure out the issue. The basics...
I have a <div> that contains the entire page and sets the boundaries. The width is set at 1200px. After a other elements I have a links bar that spans the width of the page. This is in a <div> with the id "pinkbar". The "pinkbar" has a width set to 100%, which would be 100% of the 1200px containing division. I created small padding on the left and larger padding on the right to properly position elements within the bar. I need to add one element to the left, a simple text telephone number, and then several links to the right. I put the telephone # in it's own <div> with the id of "pinkphone", and floated that <div> to the left. Worked perfectly. Now I start to add the links. I created a <div> named "pinktest" for the first link, added a border and the text link inside of the division and floated it to the right. And that is where thinks stopped playing nicely. The link division, "pinktest", floats to right about 50px beyond the border of it's containing division, and about 100px to the right beyond that border if you factor in the padding. I've played and tinkered with this to the best of my limited ability and have found no love at all. If someone can offer a suggestion as to how to make this work please do. I still need to add four more links, all floated right, along with the "pinktest" one. Relevant code below:
The CSS:
#pinkbar{
background-image: url(../visual/pinkMenuBar.jpg);
background-repeat: no-repeat;
padding-top: 0px;
padding-left: 30px;
padding-right: 100px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 25px;
}
#pinkphone{
padding-top: 3px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
float: left;
width: auto;
height:25px;
}
#pinktest{
padding-top: 3px;
padding-left: 4px;
padding-right: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: grey;
float: right;
width: auto;
height:25px;
}
The HTML:
<div id="pinkbar">
<div id="pinkphone">
<span class="cambria3black">Tel: 416 450 4460</span>
</div>
<div id="pinktest">
<span class="cambria3black">
Testimonials
</span>
</div>
</div>
Here is simplified example of what I think you might be looking for:
HTML:
<nav>
<ul class="links">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<ul class="info">
<li>Telephone Number</li>
<li>Link 3</li>
</ul>
</nav>
CSS:
nav {
padding: 1em;
}
.links {
float: left;
}
.info {
float: right;
}
nav li {
display: inline;
padding: 1em;
}
You can add as many links as you want.
Demo
A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.
CSS W3schools
So in fact, the pinktest div is inside the pinkbar division.
You should change the css of pinktest to:
float: left;
Because pinkbar div is using 100% of the page, pinktest would go as far right as possibl. Now it will go as far left as possible, ie. next to pinkphone.
Maybe this is a problem with sticky footer, maybe not. Not quite sure. I want divs inside my footer to all line up side by side using float:left, but they seem to be stacking on top of each other, and I'm not sure why.
HTML:
<div id="footer_container">
<div id="footer_content">
</div>
<div id="footer_content">
</div>..etc
CSS:
#footer_content {
font-size:18px;
float:left;
padding:0 35px;
color:#EEEEEE;
text-align:left;
height:150px;
width:150px;
}
Plus all the usual sticky footer stuff:
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#footer, .push {
height: 175px;
}
#footer_content a{
color:#989393;
}
#footer_container{
width:1100px;
height:175px;
}
You need to change the footer_content to a class instead of an id.
You cannot duplicate your element id's. Element id's must be unique, but you use id=footer_content more than once. Browsers tend to ignore subsequent elements with the same id.
Change them all to classes.
<div class="footer_content">
</div>
<div class="footer_content">
</div>
and
.footer_content {
font-size:18px;
float:left;
padding:0 35px;
color:#EEEEEE;
text-align:left;
height:150px;
width:150px;
}
Demo using your code with only that one id changed into a class...
http://jsfiddle.net/DRfuH/
Appears to be working as they are now side-by-side.