I already looked at a few answers here in stackoverflow without success, so let me post my link here:
http://www.copycopy.it/index.php?go=how
On this page for example, the white div (#body_content_container) should expand with the content, but it doesn't. The same holds true for this page: http://www.copycopy.it/index.php?go=termsAndConditions
Any idea what I'm doing wrong here? I have tried clear:both; on the child divs, but no luck.
Try removing the height: 100%; from your elements. If you want it to expand to the length of the content, you don't want to specify a height. Besides, it'd only expand to the length of the window anyway.
Remove height: 85%; from #content_text.
Replace both position:absolute; and position:relative; with float:left;.
Replace any top, left or padding with a margin.
For example :
#columnHeader {
float: left;
text-align: center;
width: 940px;
}
#column1 {
float: left;
margin: 0 10px 0 0;
text-align: justify;
width: 285px;
}
#column2 {
float: left;
margin: 0 0 0 40px;
text-align: justify;
width: 275px;
}
#column3 {
float: left;
margin: 0 0 0 10px;
text-align: justify;
width: 320px;
}
Related
I've added a negative margin to the logo of my site and it appears fine in all browsers I've tested to this point. See here:
The problem is it's not displaying right in Safari desktop. See here:
The HTML is as follows:
<hgroup id="logo_container">
<div id="logo_inside_container">
<h1 id="site-title"><img src="/wp-content/uploads/logo.png" alt="612 Vineyard - Berryville, VA"/></h1>
</div>
</hgroup>
The CSS is as follows:
#site-title {
margin-top: -30px;
display: block;
padding: 0;
width: 190px;
height: 143px;
float: left;
}
#site-title img {
width: 190px;
height: 143px;
}
#logo_container {
display: block;
width: 100%;
height: 100%;
margin: -29px 0 0 !important;
background: url('/wp-content/uploads/logo_stripe_bg.png') 0 41px repeat-x;
}
#logo_inside_container {
display: block;
width: 860px;
height: 143px;
margin: 0 auto;
background: url('/wp-content/uploads/logo_stripe.png') 0 41px no-repeat;
}
I found a way to add browser specific classes to my body class here: http://codebyte.dev7studios.com/post/4180628671/add-browser-to-body-class-in-wordpress
Simply changed #site-title { margin-top: -30px; } to .safari #site-title { margin-top: 0; }
Hope this helps someone!
I have a DIV tag that contains 2 tags. I want these figures to center themselves within the DIV, which is supposed to be centering itself within the middle of the page. How do I do this?
HTML:
<div class="images-captions">
<figure><img src="images/Prop Pics/From Mike B aka StratosDadRI/intial-blueprinting_thumb.jpg" alt="Intial Blueprinting"><figcaption>After intinal blueprint</figcaption></figure>
<figure><img src="images/Prop Pics/From Mike B aka StratosDadRI/after-damage_thumb.jpg" alt="After Damage"><figcaption>After damage</figcaption></figure>
</div>
CSS:
.images-captions { width: 600px; margin: 0 auto; }
.images-captions figure { float: left; width: 250px; padding: 10px;}
.images-captions figcaption { text-align: center; font-style: italic; }
Center them horizontally
This case I would solve like this:
CSS
.images-captions {
width: 600px;
margin: 0 auto;
text-align: center;
}
.images-captions figure {
display: inline-block;
width: 200px;
margin: 0;
padding: 10px;
}
.images-captions figcaption {
font-style: italic;
}
Demo
Try before buy
Center them vertically
You can solve it like this:
CSS
.images-captions {
width: 600px;
margin: 0 auto;
text-align: center;
}
.images-captions figure {
width: 200px;
margin: 0 auto;
}
.images-captions figcaption {
font-style: italic;
}
Demo
Try before buy
You can solve it by adding the text-align to the figure
.images-captions figure { float: left; width: 250px; padding: 10px;text-align:center}
.images-captions figcaption { font-style: italic; }
For understanding:
You want to align the text in the parent conatainer. So you have to add the attribute to the parent element and not the element itself
DEMO on fiddle
I have tried multiple methods found on this website, and nothing seems to help.
I am trying to center 2 divs that are floating left and right in a container that has a 100% width.
CSS Snippet:
#body-container {
background: none;
height: 100%;
width: 100%;
margin: 0 auto;
}
#body-inner {
float: left;
width: 550px;
left: 325px;
margin: 0 auto;
background: none;
padding-top: 3%;
padding-left: 10px;
padding-right: 10px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#bodybox {
margin: 0 auto;
width: 200px;
height: 100%;
right: 325px;
background: none;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
}
You need to do some research about how floats work, because I think you have the wrong idea. Floating one div left and one right, there is no way to center them, because they are floated. The left and right properties don't work unless the element is positioned (absolute, fixed, or relative with some implications). Also, it looks like you're trying to get the right edge of #bodybox to line up with the left edge of #body-inner. This won't work, because the right property is calculated from the right edge of the screen, not the left edge. Also, you're mixing fixed box dimensions with a fluid container width. This is fine, if you account for what happens to them when they collide.
If you're just trying to align the two <div> beside each other, centered on the page. In this case, inline-block is probably your friend. There are numerous implications and workarounds regarding white space, font sizes, order of content, etc., but essentially you would do:
#body-container {
width: 100%;
text-align: center;
}
#body-inner {
width: 550px;
}
#bodybox {
width: 200px;
}
In the above, the two <div>s would sit next to each other as long as the container is wide enough, once the container is too small, they will display one before the other, each centered in the container.
Could this be what you're looking for? Click here...
If I understand your question, you're trying to center a <div> that has 2 more <div> parents...
Code Snippet:
#body-container {
background: none;
height: 100%;
width: 100%;
/*margin: 0 auto;*/
/* testing border and height, could be deleted */
border: solid;
height: 500px;
}
#body-inner {
width: 550px;
margin: 0 auto;
background: none;
padding-top: 3%;
padding-left: 10px;
padding-right: 10px;
/*border-left: 1px solid #000000;
border-right: 1px solid #000000;*/
/* testing border and height, could be deleted */
border: solid;
height: 400px;
}
#bodybox {
margin: 0 auto;
width: 200px;
height: 100%;
/*right: 325px;*/
background: none;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
/* testing border and height, could be deleted */
border: solid;
height: 400px;
}
Having an issue on this site where the content area won't float next to my side bar.
800px content width. If I add up my content and sidebar divs, padding, etc I'm only coming up with 773px.
This is creating a child template from and then editing the the 2011 wordpress template.
http://www.rogerscomcenter.com/
try this
.left-sidebar #content {
margin: 0 26px;
overflow: auto;
width: 484px;
}
.left-sidebar #primary {
float: left;
margin: 0;
}
#primary {
float: left;
margin: 0 -26.4% 0 0;
}
I've cleared all unnecessary parts, added floats and width to both elements ('primary', 'secondary' divs). All seems ok.
http://imageshack.us/photo/my-images/804/rogerscenterforcommerce.jpg/
Change your css from:
.left-sidebar #secondary {
float: left;
margin-left: 28px;
margin-right: 0;
width: 235px;
}
To this:
.left-sidebar #secondary {
float: left;
margin-left: 28px;
margin-right: 0;
position: absolute;
width: 235px;
}
Here's the situation: my WordPress Gallery looks fine in Firefox, Safari, etc. but running on IE (under Windows), the the last image in the gallery wraps to the next line.
So far, I've tried adjusting the gallery width, padding, inline, block, and changing the number of columns to no avail. There is plenty of room on the row to fit the images.
Here's what I think are the pertinent CSS bits:
#gallery-1 {
float: right;
height: 70px;
margin: 1px;
padding-bottom: 20px;
width: 480px;
}
.gallery-icon {
width: 55px;
padding: 3px;
margin: 0;
float: left;
}
.gallery-columns-7 {
padding: 0;
margin: 0;
}
.gallery-item {
float: left;
margin: 3px;
padding: 0 2px 0 0;
width: 55px;
}
Anyone have any ideas?
Fix this
<dl class="gallery-item">
{
margin-right: 3px;
margin-left: 3px;
}
Either change it to 1px or delete them or delete just the right or left margin in the styles.css line 1219
Try setting overflow: hidden; in your .gallery-item class.