I am practicing with float property and I currently have a html like this:
section {
display: inline-block;
float: left;
width: 300px;
height: 100px;
border: solid;
margin: 3px;
}
<section style="margin-left: 150px;"> </section>
<section style="height: 300px;"></section>
<section></section>
<section> </section>
<section style="height: 300px; width: 3px; background-color: blue;"></section>
The thing I don't get about this is that the last section element (the blue box) doesn't go all the way up but instead is "fixed" a bit down. What is the reason and how can I fix this ? (Not linking fiddle because in fiddle the display is too small so it behaves differently.)
I guess it hapens becouse of the screen size.
Testing in my PC, when browser is fullscreen, all of the keeps on top. When I change the browser size to half screen, the blue section comes down.
Try use percentage to width.
It likely is breaking to a new line with the last non-blue box, then the blue box starts on the same level. If you want to stack the boxes then you will need to use some extra divs.
Related
I made this design, that contains 2 types of content boxes, one which contains pictures and one that doesn't. All the boxes that don't have a picture have the same size. And the bottom margin should also be equal like this:
But because the boxes with pictures are bigger, and I'm using "float" the bottom boxes are being placed according to the bottom margin of the biggest box at the top, which causes it to leave a lot of blank space in between.
Is there any way to float the bottom boxes under the small boxes? I have tried both with floats and "displays" but nothing seems to work.
This is my code:
<div class="contentBox">
<div class="contentBoxHead">
</div>
<div class="contentBoxPicture">
<img src=" /categoria/articulo/images/" />
</div>
<div class="contentBoxDescription">
<h2 class="contentBoxDescriptionText">
</h2>
<h3 class="contentBoxDescriptionText">
</h3>
</div>
</div>
...
.contentBox{
width: 300px;
float: left;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
I have removed all the CSS related to the inner child divs of "contentBox" for it doesn't seem to be the problem here.
Please note that this is for a CMS type of site and I am trying to make this work the same way if all the boxes have pictures or not, and even if the order is completely different. For that reason I can't hardcode the positions.
I don't believe this is achievable with CSS only solution. But this is basically so called masonry layout. You can achieve it with e.g. this JavaScript library: http://masonry.desandro.com/
put the divs with content in one div and image one in another div.
for ex.
<div class="content_description">
<div class="content_1"></div>
<div class="content_2"></div>
</div>
<div class="content_image">
<img src=""></img>
</div>
and then put css like
.content_description {
width : 300px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
.content_image {
width: 300px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
cover all of this with another div where you define your float left.
If you don't need very fine control over the content flow then you can use CSS columns. I prepared a little demo for you where you can see there is no float, content is wrapping, height is properly preserved.
Demo: http://jsbin.com/pesoto/edit?html,css,output
Have fun and explore CSS3 features, theres a lot of good stuff there. :)
I know this is a standard question, but I am trying to get a very special behaviour. I got the following example code:
CSS:
.left{
background-color: red;
min-width: 300px;
width: 40%;
float: left;
}
.middle{
background-color: blue;
width: 40%;
overflow-x: auto;
white-space: nowrap;
float: left;
}
.right{
background-color: green;
min-width: 100px;
width: 10%;
float: left;
}
HTML:
<div class="left">LEFT</div>
<div class="middle">This shall get a scrollbar if necessary. Here may be long content.</div>
<div class="right">NOWRAP</div>
I do not want anything to wrap. When resized, the middle div should be rezized, but it shall never wrap!
I need variable widths.
When I shrink the browser window, at first it looks right: The middle div becomes smaller and gets a scrollbar. This is what I am looking for. But when I continue shrinking the green div gets wrapped. Instead I want the middle div to become smaller and smaller.
I am already using bootstrap 2.
Thanks for your help,
best regards,
Yaron
The green div gets wrapped until the min-width is reached. Then your div.right ("NOWRAP") will float under the middle and left div. To avoid this your have to reverse the order of your divs:
<div class="right">NOWRAP</div>
<div class="middle">This shall get a scrollbar if necessary. Here may be long content.</div>
<div class="left">LEFT</div>
Then make your .right div
position: absolute;
right: 0;
and delete the float.
Now you only have to change your floats from the left and middle class to "right" and the width to for example "50%". That's all.
Here an example: http://jsfiddle.net/5MdY3/
Here's the ANSWER.
I've used Bootstrap 3 CSS framework in order to achieve what you asked for with my knowledge. I guess so it can even be done without bootstrap but I'm not that expert. By your post i'm thinking that you're looking for some responsive design. To make it easy I'd suggest you to use Bootstrap 3. Amazing framework that helps to do a lot more things in a seconds.
I'm working on a project to better my knowledge of Spring MVC practices. To do this, I've been creating a very scaled down version of Twitter. Basically, a user can sign in and post a little blurb and also see a timeline of their previous blurbs and all their follower's blurbs.
I have a background image across the whole page and a container in the middle with a light blue background for just the post blurb box and the timeline. The light blue background only goes to the bottom of the visible page. If the timeline goes down past a single page view where you have to scroll down, the light blue background stops at the bottom of what was visible on the initial load.
I have my page defined like this:
The div class=blurb is the blurbs in the timeline.
<div id="container">
<div id="mainPanel">
<div id="timeline">
<div class="class="blurb"">
<span class="user">test</span> <span
class="displayName">Test User</span> <span class="bodytext">This is a small blurb.</span>
<span class="timestamp">1 hours ago</span>
</div>
<div class="blurb">
<span class="user">admin</span> <span
class="displayName">Test admin</span> <span class="bodytext">This is another small blurb.</span>
<span class="timestamp">1 hours ago</span>
</div>
</div>
</div>
</div>
The CSS style for the container is shown below.
#container {
width: 650px;
height: 100%;
margin: 0 auto;
padding: 10px;
background-color: #DDEEF6;
}
Can I modify that container CSS in a way to make it be as long as the timeline is? The timeline grows with every blurb post.
Screenshot with height defined to 100%
Screenshot with height undefined
UPDATE:
Okay, so it absolutely has to do with the floats. Thanks to the two commenters below. The #socialPanel is defined as such:
#socialPanel {
width: 250px;
float: right;
}
Using Chrome's developer tools, if I clear the float is drops the social panel below my blurbs/tweets and moves the light blue background all the way down the list of blurbs.
Any suggestions on what I could research to keep the socialPanel floating left at the top, but still have my light blue background use all the available height? Many thanks on helping me figure it out this far!
UPDATE TWO:
I combined the methods shown in the answer below to solve my problem. I added a div with class clearer with clear:both; and then removed the height: 100%; from the #container styling. This resolved the problem.
NOTE:
Adding the overflow: hidden; to my container's styling made the page cut off after the light blue area, it did not make the light blue area go all the way down.
Many thanks to all the help! I'm still learning and it was all very appreciated!!
Place overflow:hidden on the #container.
How does it work?
One would think placing this style on a container would hide the floats instead of containing them. What actually happens is that overflow:hidden makes the element establish a new block formatting context. This fixes the float containment of any children floating within it. This CSS fix is more practical then including an additional element in the HTML styled with clear:both and works on all modern browsers, including IE7+.
You probably just need to add a clearing div after your two inner divs. http://jsfiddle.net/c3vTU/1/
<div class="outer">
<div class="inner-left"> Stuff on the left</div>
<div class="inner-right">Stuff on the right <br/><br/></div>
<div class="clearer"> </div>
</div>
CSS
.outer {
width: 520px;
padding: 10px;
background-color: #eee;
}
.inner-left {
float: left;
width: 300px;
background-color: red;
}
.inner-right {
float: right;
width: 200px;
background-color: yellow;
}
.clearer {
clear: both;
}
As #MichaelIrigoyen noted, you can also just add overflow: hidden or overflow:auto (I think makes more sense) to your container. http://jsfiddle.net/c3vTU/4/ This is cleaner and I love it!
If you simply remove the height declaration (height: 100%;) from #container, it will expand as its children do (and the background of course, too).
When ever I develop HTML pages, I get problem with window resize. The page alignment gets disturbed. One element or tag overlaps with the other.I want my page that when I resize,
my page it should remain the same & srollbars should appear.Someone Pls suggest solution.Which style attribute (position, overflow) is good to use for this?
Set a width on the body (or, more preferably, a min-width)
Not sure if this is what you need, but probably:
overflow:auto;
is what you are looking for
i understand i think, the issue is that you place your elements in a relative position(the default for position on any element), so relative to your current screen size. you can change the position to absolute and they will not move, this can cause you to loose control if your not an css ninja. ill show some cool techniques now how to control elements.
hint 1:
wrap your tags! a wrapped element will stay put!
example:
html =>
<div id="box_wrapper">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
css =>
#box_wrapper {
margin: /*top and bottom*/5px /*left and right*/ auto; /*this will center your wrapper*/
height: 300px; /*what ever height you want*/
width: 1200px; /*what ever width you want*/
}
.box {
/*what dimensions you want*/
}
this a good way of keeping objects in place, they will never leave the wrapper element if you specify a overflow.
hint 2:
position: absolute; caution this can get messy.
i use position absolute when positioning logos to the corner of a screen so that if you change the size of the screen the logo will still remain in the corner. this is cool cause you dont need a specified width for the parent elements.
html
<div class="header">
<img src="/images/logo.png" alt="page_logo">
<div id="login_button">
/*......*/
</div>
</div>
css
.header {
width: 100%
height: 150px;
border: 1px solid #ccc;
}
.header img{
position: absolute;
margin: 0px; /*position: absolute must have a margin even if its 0*/
float: left;
height: 150px;
}
#login_buttons {
float:left;
position: absolute right;
margin-right: 5px;
}
this example puts a logo on the top left hand side and the login buttons on the right and if you then change the screen size it will keep them where they need to be.
i dont want to write a whole tutorial here but these tips should help in designing solid pages that adapt to multiple screen sizes.
its hard to kinda guess what the issue could be if i cant see the code but i hope this helps.
<body id="page" onload=" pageHeight = document.getElementById('page').offsetHeight;
pageWidth = document.getElementById('page').offsetWidth;
pageHeight=1000 px ;
pageWidth=600 px ;
"> </body>
you got to fix the width of the body on page load to pixels instead of % based on the resized browser window size.
I'm making a website and want it to appear as a grid of boxes and rectangles.
I have a 6x6 grid of relatively-alined left-float divs. They work fine and fit neatly in a 900 width wrapper div. If i want a horizontal rectangle, i simply make one of these squares twice as wide (accounting for margins between, but that's irrelevant) and delete the one next to it. No problem.
The issue I have comes in when I want to make a rectangle twice as TALL. it ends up bumping everything left of it in the same row as it a line down. The same happens with a square twice as large (2x2 grid units).
Here's the code in jsfiddle:
http://jsfiddle.net/zucw9/
Essentially, how can I get either 8,9, and 10 to shift up one space, or for 6,7, and 8 to move into that gap, leaving 9 and 10 where 6 and 7 are right now?
http://jsfiddle.net/zucw9/10/
This solution isn't a very good solution but it works.
(I changed some of the names so i could read it better. (.grid_rect_tall became .grid_tall etc. margin-left:10px; margin-right: 0px etc.. became margin: 5px;)
basically you specify a -ve margin-bottom for the tall one and an extra margin so the other elements don't overlap.
.grid_square, .grid_long, .grid_tall
{
float: left;
margin: 5px;
background: #6CC;
}
#main{
position: relative;
width: 905px;
overflow: hidden;
border: 1px solid black;
padding: 5px;
}
.grid_square{
width: 140px;
height: 140px;
}
.grid_long{
width: 290px;
height: 140px;
}
.grid_tall{
width: 140px;
height: 290px;
margin-bottom: -150px;
}
.rbuffer
{
margin-right: 155px;
}
.lbuffer
{
margin-left: 155px;
}
I'd still go with my comment though and use either: http://960.gs or css3 grid layout: http://w3.org/TR/css3-grid-layout
EDIT:- I thought i better put a why to my comment earlier that this is not a good solution. Simply put: if you want to change the layout of the page you will have to change the classes on the items as well as having to change the css.
Also created one with even more elements to show the possibilities: http://jsfiddle.net/zucw9/11/ (or in em instead of px because i was bored. http://jsfiddle.net/zucw9/15/)
The layout is standard, how it should be displayed. I would recommend to use another div which wraps up the dives that appear before the taller div. This is not a very flexible solution though.
Edit: Move
<div class="grid_square">8</div>
<div class="grid_square">9</div>
<div class="grid_square">10</div>
higher in hierarchy after
<div class="grid_square">2</div>
should fix it.
i hope your thinking like below
code:
<div id="main">
<div class="grid_square">1</div>
<div class="grid_rect_long">2</div>
<div class="grid_rect_tall">3</div>
<div class="grid_square">4</div>
<div class="grid_square">5</div>
<div style="clear:both"></div>
<div>
<div class="grid_square">6</div>
<div class="grid_square">7</div>
<div class="grid_square">8</div>
<div class="grid_square">9</div>
<div class="grid_square">10</div>
</div>
</div>