I have a webpage which uses this tabs script on it. I want to add a two column layout to one of the tabs, and I am using the following code:
<div class="content-wrapper">
<div class="con con-left">
Column 1
</div>
<div class="con con-right">
Column 2
</div>
</div>
Which works with this CSS:
.content-wrapper
{ width: 100%;
margin: 0 auto; }
.con
{ margin: 0 10px;
float: left;
display: inline; }
.con-left
{ width: 500px; }
.con-right
{ width: 500px; }
The problem is the size of the tab does not expand for the amount of text that is insidethe div - as shown in the image below. How can I set the CSS so that the tabs will recognise the content within the <div> tags?
you can't set a width on inline elements - make them inline-block and remove the float so the wrapper will wrap properly.
If you want to keep the float then, either use a clear after your floated elements or add overflow:auto to the wrapper
If you want to use floats, you need to clear them.
You could try:
.content-wrapper {
width: 100%;
margin: 0 auto;
overflow: auto;
}
Setting overflow: auto on the containing block will enclose all your floats as you expect.
Related
I am trying to create something like a gallery that shows different number of images per row based on the width of the browser. This has already been achieved using overflow: hidden in the outer div and float: left in the inner div.
However, what happens with this is that my images are always aligned to the left, leaving alot of whitespace on the right. How do I make it such that the gallery is always centered in the screen no matter how many images there are per row.
My code is on http://codepen.io/anon/pen/KzqAs
Thank you very much. :)
How about this: http://codepen.io/anon/full/mtBbF
HTML
<div class="container">
<div class="red box">red</div>
<div class="blue box">blue</div>
<div class="black box">black</div>
</div>
CSS
body{
text-align:center; /*You would need to define this in a parent of .container*/
}
.container{
display: inline-block;
margin: 0 auto;
text-align: left;
}
.box {
width: 300px;
height: 300px;
float: left;
}
Demonstration
You need to use an id(or class) on the main div. Set width: 300+px and margin: auto
Also your boxes should be with display: inline-block to allow them to begave "inline"
I have changed colors of the boxes a bit for better visibility.
I have two divs (which have a fixed width of 150px) within another parent div, which has a changing width, depending on the browser width.
I would like to position the two child divs within the parent, so the margin between the two divs would be equal to the margins between the edges of the parent div and child divs.
Example with red arrows always having equal lenghts:
edit: you could do what I first suggested, but now add
#leftwrapper, #rightwrapper { text-align: center; }
#childdiv1, #childdiv2 { display: inline-block; }
inline-block, instead of block, and you don't need the margins then for child div...
if that don't work, which probably won't, it might be VERY hard to get what you want to happen without using a table
you would have to create two new div wrappers
so you have
#parentdiv { display: block; width: 100%; }
#leftwrapper { display: inline-block; width: 50%; }
#rightwrapper { display: inline-block; width: 50%; }
#childdiv1 { display: block; margin: 0 auto; }
#childdiv2 { display: block; margin: 0 auto; }
html would be like
<div id="parentdiv">
<div id="leftwrapper">
<div id="childdiv1">your stuff</div>
</div>
<div id="rightwrapper">
<div id="childdiv2">your stuff</div>
</div>
</div>
I've taken a look through post on here but seem unable to find a solution that wants to work and I'm wondering if my float:left tags are causing the issue.
Basically I have wordpress blog I'm trying to set using nextgen gallery now for what I wish to do I need to modify way it displays a list of images. into three sections. Centring each image with in the column. Now I've set this using the following code which creates the three columns fine below this its very basic but it does not work on here I assumed I would be able to use the margin:0 auto; but this does not work.
http://jsfiddle.net/locka/dcdkf/
HTML
<div id="wrapper">
<div id="column-left">
<p>LEFT </p>
<img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQtZTDwx3wVJMqWWTlCW8BDZ7fPvQVbRZpILy0NAeHIGaRxcRtR">
</div>
<div id="column-center">
<p>MIDDLE </p>
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTCgQRoPbKR8WpHtPZfBiPKK6NaNN3vyWqLarsKDDb0zLWd0AID"></p>
</div>
<div id="column-right">
<p>RIGHT </p>
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcScF65ryaqzfG9gpVrld1CLJ7_5wJOpmH96FRvB4TvnkFaqyloh">
</div>
CSS
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 980px;
background: silver;
margin: 0 auto;
}
#column-left {
width: 280px;
float: left;
background: red;
}
#column-center {
width: 420px;
float: left;
background: GREEN;
margin: 0 auto;
}
#column-right {
width: 280px;
float: left;
background: BLUE;
}
I've basically need to have 3 images in a row these may be 2 size either a landscape or portrait both same hight but different widths I need to centred each image with in it's column. The left and right columns will be the same with as the widest image that way as landscape photo's they will always look like they are left and right aligned and if portraits appear centred in there respect columns. Then the centre column will take up the rest of the space and this will centre all images thus giving equal border left and right. and making them tidy.
I can set up the columns following what looks to be stand way across the net how try as I might can not centre the images.
Images are by default inline elements, and will as such obey the text-align CSS rule of its parent. Since text-align doesn't work in your case, it must mean that your images are not inline elements anymore. Probaby there is a img { display: block } somewhere in your CSS.
This means that margin: 0 auto should do the trick. The problem is that you are applying that style on the img's container instead of on the img itself.
So, instead of
#column-center {
width: 420px;
float: left;
background: GREEN;
margin: 0 auto;
}
use
#column-center {
width: 420px;
float: left;
background: GREEN;
}
#column-center img {
margin: 0 auto;
}
As you said, use text-align: center; to center all of a column's content. You may want to wrap the image in a div with this property if you don't want the rest of the column's content to be centered.
My website here is a wordpress website but I believe the only thing I need to fix for an issue I'm having is the header height. The home page as a rotating banner which is 403px high and then all other pages have a header image of 303px high. I'm just trying to get the header height to be auto so the #container will automatically hug the bottom of the banner no matter it's height.
CSS
header { width: 960px; height: auto; margin: 0 auto; display: block;}
#container { width: 960px; margin: 20px auto; padding: 0 1.5em;}
What else should there be so the #container realizes that the header is there?
UPDATE:
NEW HTML
<div style="clear:both;"></div>
</div><!-- end of container-->
NEW CSS
#banner {
width: 960px; /* same with already defined */
height: 403px;
margin: 0 auto;
}
The only thinkg i did slightly differently was place the navigation under the header instead of the banner as it was underneath the banner of which i don't want. It looks the same however the doesn't seem to be doing anything differently then what I had previously. I still have that gap on the blog page under the banner.
I appreciate the help Zuul. I do think I have a bit more to go and then we can figure this out. Thanks!
The issue with the layout doesn't lay over the header tag, there are some elements positioned weirdly that are causing several problems:
This is a list of things to do in order to rectify the layout flow:
1)
Remove the <div id="banner"> from within the <nav id="main-navigation">.
The <nav id="main-navigation"> is set to height:70px and the slider is far taller than that.
Place it as a child of the <header> or after the <header> and before the <div id="container">.
e.g,
<header>...</header>
<div id="banner">...</div> <!-- here is better -->
<div id="container">...</div>
2)
After the first step, you can then remove from your #banner the following CSS:
REMOVE
#banner {
left: 50%;
margin-left: -480px;
position: absolute;
top: 69px;
width: 960px;
z-index: 1;
}
ADD
#banner {
width: 960px; /* same with already defined */
height: 403px;
margin: 0 auto;
}
3)
The step 01 and 02 should fix the #banner position along with the header height issue.
Now remains fixing the #container that contains floated elements and should be cleared at the end.
Here, your current class clearfix will not work, contains to many declarations, I would suggest:
<div id="container">
<div id="main">...</div>
<aside>...</aside>
<div style="clear:both;"></div>
</div>
Adding that new <div style="clear:both;"></div> at the very end of the #container will allow the float to be cleared and the document flow to resume normally.
EDITED
First phase is done, now the only thing you need to do is to remove the height from the #banner, and the gap will go away.
#banner {
width: 960px; /* keep this */
margin: 0 auto; /* keep this */
}
add a div with a style of clear:both just before your container div ends. This will allow to make the container div's height according to the contents inside it. You can make a class named clear and inside it you can put this style so that you can use this class anywhere in your website.
I'm trying to force my content div to fill the whole wrapper div.
The wrapper is set up to force my footer to the bottom of the window, or page. Which it does just fine.
If I use:
min-height: 500px (or 40em); the content div stretches as requested.
However, if I use:
min-height: 100% (or any other %); nothing happens to the content div.
This makes no sense to me. What am I missing?
Per the request (excluding borders and colors and stuff):
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
width: 80%;
margin: 0 auto -4em;
}
#content {
min-height: 100%; // nothing happens, change to em or px something happens.
}
#sidebar {
float: right;
}
#footer {
clear: both;
height: 4em;
}
#push {
height: 4em;
}
<body>
<div wrapper>
<div header>
<div menu></div>
</div>
<div sidebar></div>
<div content></div>
<div push></div>
</div>
<div footer></div>
</body>
You can try using "line-height: 100%" on your content div. Although... if there is an explicit height set on your wrapper div, you should be able to use 100% on one of the various height measurements to force it to expand.
Post some quick example markup that shows your wrapper and your content.