Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Is it possible: Float top div on CSS3?

css3 float grid div

This topic has been archived. This means that you cannot reply to this topic.
2 replies to this topic

#1 PuddingEatsPanda

PuddingEatsPanda

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 57 posts

Posted 01 July 2014 - 11:28 PM

Hi everyone! I am trying to make a grid using CSS3. This is the outcome using display: inline-block;
ss2.png

This one using float: left;
ss2.png

The grid seems possible but it will only look good if the respective DIVs are all equal in height. Is there any CSS3 code that is equivalent to something like floating DIV to the top instead of the original that floats DIV to the right or left (like below)

float: right; 
float: left;

I was hoping I could use that code to make the next line of DIV move up to remove that space. And be like this:
ss2.png
 
The code used here is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
	<title></title>
	<style type = "text/css">
	*{
		margin: 0 0 0 0;
		padding: 0 0 0 0;
	}
	#all{
		position: fixed;
		width: 100%;
		height:100%;
		background-color: Red;
		/* position: fixed; */
		/* overflow:auto; */
	}
	.posts{
		margin:2px 2px 2px 2px;
		background-color:Pink;
		width: 24%;
		display: inline-block;
		float:right;
	}
	.posts:hover{
		color:black;
	}
	</style>
</head>
<body>
	<div id = "all">
		<div class="posts">
		POSTAAAAAA RICA!
		</div>
		
		<div class="posts">
		POSTAAAAAA RICA!
		</div>
		<div class="posts">
		POSTAAAAAA RICA!
		</div>
		<div class="posts">
		POSTAAAAAA RICA!<br> ajasdlasdn djsdli</br> asldie askiens ske
		</div>
		<div class="posts">
		POSTAAAAAA RICA!
		</div>
		<div class="posts">
		POSTAAAAAA RICA!
		</div>
		<div class="posts">
		POSTAAAAAA RICA!
		</div>
		<div class="posts">
		POSTAAAAAA RICA!
		</div>
		<div class="posts">
		POSTAAAAAA RICA! EL hermanos patos
		</div>
		<div class="posts">
		POSTAAAAAA RICA!
		</div>
		<div class="posts">
		POSTAAAAAA RICA!
		</div>
		<div class="posts">
		POSTAAAAAA RICA!
		</div>
		<div class="posts">
		POSTAAAAAA RICA!
		</div>
		<div class="posts">
		POSTAAAAAA RICA!
		</div>
		<div class="posts">
		POSTAAAAAA RICA!
		</div>
		<div class="posts">
		POSTAAAAAA RICA!
		</div>
	</div>
</body>

</html>

Thank you for any future help and suggestions~ %5E%5E.gif


Edited by PuddingEatsPanda, 02 July 2014 - 01:09 AM.

Want to learn MOAR


#2 PuddingEatsPanda

PuddingEatsPanda

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 57 posts

Posted 04 July 2014 - 03:39 PM

bump?


Want to learn MOAR


#3 Vaielab

Vaielab

    Programming God

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1382 posts

Posted 04 July 2014 - 04:13 PM

Technically, wou can do this in css3 with grid layout... sadly, no browser accept it yet

Take a look at the documentation http://dev.w3.org/csswg/css-grid/

 

In the mean time, you can achive this with javascript, there are a lots of script doing so, just google jquery grid layout

I used Masonry on some project and it's working great.


You can now stalk me on linkedin: http://ca.linkedin.c...elle/24/b44/88/ !





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download