I am trying to shift my style away from using tables to control formatting, but I haven't seen a simple css solution that does exactly the same thing as
<table><tr><td>aribitrary-html-A</td><td>aribitrary-html-B</td></tr><table>
All I want is to make sure aribitrary-html-A and aribitrary-html-B are aligned horizontally. I have tried various CSS concoctions using display: inline, clear: none, and float: left but they all have unwanted side-effects of moving my content around, while the table-tr solution just does what I want, regardless of what's in the arbitrary HTML, and regardless of what is in HTML that contains my table.
Am I missing something?
Why not use a grid system then like 960gs
You probably need this
<div id="wrap">
<div id="left">
content 1
</div>
<div id="right">
content 1
</div>
</div>
#wrap {
width: 50%; /* change this as you wish */
}
#left, #right {
display: block;
float: left;
}
You need to use <div>s and decent CSS. For people that aren't confident enough (or lazy, like me) Yahoos YUI CSS Grid Builder is invaluable! Enjoy!
Maybe this might help you?
<div style="width:400px;margin:0 auto;">
<div style="background-color:red;float:left;height:200px;width:200px;">
</div>
<div style="background-color:blue;float:right;height:200px;width:200px;">
</div>
</div>
Just don't put your css within style attributes like I did.
Just create two Divs and align the one you want to have on the left side.
Like so (update):
<div id="wrap" style=" width:300px;
margin:auto;
border: 1px solid black;
padding:1px">
<div id ="A" style="float:left;
border: 1px solid black;"> aribitrary-html-A </div>
<div id = "B" style="border: 1px solid black;"> aribitrary-html-A</div>
</div>
Update: I added a wrapper with a defined width. Also I used some borders to visualize the table-like layout. Hope that helps.
Wrap element in a div, set fixed width for the wrapper. Give each element in the div a width and set the margin to 0 auto.
Just set the CSS "float" property to left on every element you want to display horizontally, and make sure each of those elements have a set width.
Related
I am trying to build a horizontal scrolling layout, composed of image blocks:
<div class="container">
<div class="item">
<img src="http://placehold.it/200x300">
</div>
<div class="item">
<img src="http://placehold.it/400x300">
</div>
<div class="item">
<img src="http://placehold.it/300x300">
</div>
</div>
I used display:inline-block and white-space: nowrap; properties to achieve this, and it does work but browsers don't seem to recompute block widths on resize?
Check here: https://jsfiddle.net/g597w3Lr/2/ and try resizing the browser..
Here is a screen grab to better understand what is my problem:
https://youtu.be/VxKo4gysc1o
At first all images are well positioned and i can scroll horizontally: perfect.
I then resize the browser
images are resizing, not the .item wrappers. White gaps appear :(
Basically i was expecting same feature as with vertical scrolling, i.e. adapting width depending on content size.
I actually dont even understand the logic here..
Is there any way to get over this?
Thanks!
Original answer
EDIT 2: Looking at your video I think the new approach is what you are looking for.
You have to display your divs with .item class as inline and remove your white-space: normal property.
.item {
display: inline;
height:100%;
}
Updated JSFiddle.
Explanation:
I am not an expert of CSS so if someone see some mistake please correct me.
When you display an element as inline-block as the official documentation says:
inline-block
Causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
which means that the element that you display as inline-block acts like a block but you can set it inline (in the same line). This means that you can set a div (which is display: block as default) in a single line. You can also see it here:
The div element, short for division, is the block level generic container.
Also, inline elements cannot get height/width properties so this is the reason why when you display your divs with .item class as inline, they wrap the content but not get the height/width that they should correspond to take (from their parents in your case, as you put them with %).
If you display them as inline-block it does not changes anything about their default height/width properties. Just allows you to display them in a single line.
JSFiddle to see the three divs (inline/ inline-block / block, as default).
You will have to modify slightly your css
HTML
<div class="container">
<div class="item">
<img src="http://placehold.it/200x300">
</div>
<div class="item">
<img src="http://placehold.it/400x300">
</div>
<div class="item">
<img src="http://placehold.it/300x300">
</div>
</div>
CSS
html,body {
height:auto;
}
.container {
display: inline-block;
white-space: nowrap;
height:auto;
}
.item {
display: inline-block;
white-space: normal;
}
.item img {
width:100%;
height:100%;
}
Fiddle
check it see that's what you want ?
I manage your classes with border:solid 1px red;
and use width:100% in some classes.
also in class item:
width:100%;
https://jsfiddle.net/g597w3Lr/6/
<div id="logo" style="center"><img src="logo1.png"></img></div><br><br><br><br><br><br><br></div>
This doesn't work.
Whats the problem with the style of the div? i'm sure the syntax is wrong.
"center" is not a style. You're probably looking for text-align: center.
Images are self-closing like the line-break. You don't use </img>.
You have a spare closing </div> at the end of the line. One of them needs removed, I'm not sure which spot you want it in.
<div id="logo" style="text-align: center"><img src="logo1.png"></div><br><br><br><br><br><br><br>
you cannot define style in div like that instead you can define the div property in css and call the class or id of the css.
Best way to center a element is probably to specify its width and put the side margin to auto:
If for example your logo1.png is 570px wide, you would do something like this in the css
#logo{
margin:0px;
margin-left:auto;
margin-right:auto;
width:570px;
}
Try this. You have to set the width of a div as shown below in order for it to work. To specify that the text inside the div is centered, simply apply style="text-align: center"
<div id="logo" style="margin-left: auto; margin-right: auto; width: 500px; border: 1px solid #ff0000">Your content here....</div>
Note: set 500px width to your desired width. Also, remove border: directive. I just added that so you could see the DIV was centered.
fiddle
I'm trying to convert my site from using tables to just using css and divs but I'm running into a lot of problems with trying to figure how to exactly do it, I've been looking for tutorials on centering a site with css and how to put divs side by side but I can't really find one that does both and I keep getting confused by how to exactly achieve this, I asked around a bit and I got told to use absolute positioning but still I can't really wrap my head around this.
So basically how would I arrange the 2 central div side by side while keeping the whole thing centered in the browser? The following image is the layout I'm trying to achieve:
the blue boxes are eventual other stuff I might want to put in them, such as a blog requiring again the use of side by side divs.
right now I have the following layout:
<div id="wrap">
<div id="banner"> banner </div>
<div id="navbar"> navigation links </div>
<div id="body"> stuff </div>
<div id="footer"> stuff </div>
</div>
General idea: http://jsfiddle.net/JjbJE/
A little specific but provide you a great adventure to learn HTML | CSS : http://jsfiddle.net/JjbJE/3/
float:left|right this property does the side by side trick
clear:both this property clear away the float property
Other things are pretty easy to learn, just head to W3Schools
First you need a main container to center everything. Then two separate divs. See the HTML below:
<div id="main">
<div class="box">Left Box</div>
<div class="box">Right Box</div>
<div class="clear"></div>
</div>
Here is the CSS you will need:
#main{
width:960px;
margin:0 auto;
}
.box{
width:450px;
float:left;
border:solid 1px #000000;
}
.clear{
clear:both;
}
Hope that helps.
Here's my general overview on converting to a CSS based layout - if you have a table based layout, this is a good plan - in the end you can do more, Google will like you more, and it's much cooler.
My strategy is to look at all the groups of things on your page. Whatever needs to go into a group together, put inside a div. Assign this div a class and/or id to style it. If the divs are grouped, put them together in a div too.
In your case, you have two chunks of content to group inside of divs. Style them to be the size and shape you like, background, border, whatever is needed. Then group them together in an additional div, and center it. This and the rest of the page content can go inside a container div, which will determine the width of the page, how it's aligned, etc.
One possibility is to have a centered wrapper class and contain the divisons inside of that:
<div class="wrapper">
<header></header>
<div id="middle">
<div class="main-article clearfix"></div>
<aside></aside>
</div>
<footer></footer>
</div>
Then to style, center the wrapper, float the aside and main-article:
.wrapper { width: 1024px; margin: 0 auto; /* the auto centers it */ }
header, footer, aside, { display: block; }
.main-article { width: 50%; float: right; }
aside { width: 50%; float: left; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
Note: This is untested, and uses the clearfix from the HTML5 Boilerplate.
Update 01.22.2014: This "Holy Grail Layout" has ben solved by Flexbox. Check out Solved By Flexbox for more information on recreating this layout (and many more).
I want the outer div, which is black to wrap its divs floating within it. I dont want to use style='height: 200px in the div with the outerdiv id as I want it to be automatically the height of its content (eg, the floating divs).
<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div style='width=300px;border: red 1px dashed;float: right;'>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>
How to achieve this?
You can set the outerdiv's CSS to this
#outerdiv {
overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}
You can also do this by adding an element at the end with clear: both. This can be added normally, with JS (not a good solution) or with :after CSS pseudo element (not widely supported in older IEs).
The problem is that containers won't naturally expand to include floated children. Be warned with using the first example, if you have any children elements outside the parent element, they will be hidden. You can also use 'auto' as the property value, but this will invoke scrollbars if any element appears outside.
You can also try floating the parent container, but depending on your design, this may be impossible/difficult.
Firstly, I highly recommend you do your CSS styling in an external CSS file, rather than doing it inline. It's much easier to maintain and can be more reusable using classes.
Working off Alex's answer (& Garret's clearfix) of "adding an element at the end with clear: both", you can do it like so:
<div id='outerdiv' style='border: 1px solid black; background-color: black;'>
<div style='width: 300px; border: red 1px dashed; float: left;'>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div style='width: 300px; border: red 1px dashed; float: right;'>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>
<div style='clear:both;'></div>
</div>
This works (but as you can see inline CSS isn't so pretty).
You may want to try self-closing floats, as detailed on http://www.sitepoint.com/simple-clearing-of-floats/
So perhaps try either overflow: auto (usually works), or overflow: hidden, as alex said.
I know some people will hate me, but I've found display:table-cell to help in this cases.
It is really cleaner.
First of all you don't use width=300px that's an attribute setting for the tag not CSS, use width: 300px; instead.
I would suggest applying the clearfix technique on the #outerdiv. Clearfix is a general solution to clear 2 floating divs so the parent div will expand to accommodate the 2 floating divs.
<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
<div style='width:300px; float: left;'>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div style='width:300px; float: left;'>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>
</div>
Here is an example of your situation and what Clearfix does to resolve it.
Use jQuery:
Set Parent Height = Child offsetHeight.
$(document).ready(function() {
$(parent).css("height", $(child).attr("offsetHeight"));
}
Add a new, empty div just before the closing tag of the parent with this style: clear: both;. Like this: <div style="clear:both"></div>.
I spent over a week trying to figure this out!
I'm slicing a psd, and there is a part of the screen that will repeat with as many items as it needs, similar to the question list of stackoverflow.
It needs to have this structure:
Is it possible? How should the css be?
Thanks!
You could try the following:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
}
#user-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<!-- The rest of the page's content goes here. -->
</div>
</div>
This makes the "content" div fill the rest of the space that "user-content" doesn't fill. It will only be an issue when your content is taller than the user content... but that's a different problem :)
This is another possiblity:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
float:left;
}
#user-content {
float:left;
}
#page-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<div id="page-content">
<p>This should take up the rest of the space.</p>
</div>
</div>
</div>
The problem lies in your left div where you state "width can increase depending on the content". How is this width defined? The div to the right can expand to 100% of the remaining space but you must define the relationship between the left and the right divs by either providing a fixed width to the left div or providing a percentage to both that equals 100%.
Well, as you’ve probably seen, so.com used fixed width div’s to achieve your layout goal.
Obviously my first tries setting the width automatically failed, but maybe I’ve a useful workaround for you: use left and right floating of both boxes.
<div style="border: 1px solid #000000; width: 60%">
<div style="border: 1px solid #444444; float: left;">
some text
</div>
<div style="border: 1px solid #999999; float: right;">
foo
</div>
</div>
Of course this will only help if I understood your question correctly ;)
As far as I know the only way to give your variable width container a variable width and float it to the left is to give it {width:auto;float:left;}
But I don't know if you can do anything useful with this because if you have text or a lot of small fixed width items to put in this container, they will keep expanding out along the first line until they've filled the width of the outer div before going on to the second line. They won't fill up the whole height and then push outward gradually as the text gets too much to contain.
Just a thought - you might be able to do some nifty JavaScript (possibly using jQuery?) which sizes those divs like you need them.