I have made a simple example here ->http://jsfiddle.net/Tryah85/DV4N8/
#contactContainer {
background-color: #999;
float: left;
font-weight:900;
text-align:center;
margin: 0 auto;
}
.contactLeft {
position:relative;
margin:auto;
background-color:lime;
float: left;
margin: 0 0 0 0;
width: 230px;
border-left: thick solid #006;
padding-left: 33px;
height: 100px;
}
.contactRight {
position:relative;
margin:auto;
background-color:yellow;
text-align:right;
float: left;
width: 230px;
border-right: thick solid #006;
padding-right: 33px;
padding-top: 10px;
height: 90px;
}
I am using the standard theme this year- twentyfourteen. I want two boxes to work responsively when the screen is minimized, box B falls under A like has done in the mockup fiddle I made. I have tried nesting 2 classes inside of an ID. From this example you will notice I used three IDs instead.
I embedded the CSS within the Wordpress page and it only recognizes the first Div.
Basically I am making a contact page with the left div having an address, and the right to have contact information. When a person with a smartphone/iPhone views the page the boxes are stacked- my example works, but not in Wordpress. Anyone know why?
I finally figured this out. CSS can be embedded within a page (when loading static strings into the dashboard). It only works when there are no empty spaces between classes and IDs. This not important in other CSS files I have worked with, but this took me a while to figure out.
Enter like this:
<style type="text/css">
#contactContainer {
background-color: #999;
float: left;
font-weight:900;
text-align:center;
margin: 0 auto;
} <---------NO SPACE
.contactLeft {
width: 230px;
border-left: thick solid #006;
padding-left: 33px;
height: 100px;
} <---------NO SPACE
.contactRight {
text-align:right;
float: left;
width: 230px;
border-right: thick solid #006;
padding-right: 33px;
padding-top: 10px;
height: 90px;
}
</style>
Related
Every time I include the code for the facebook friends like box the div element box below it goes wacky. I cannot control where its positioned. It either disappears or overlaps a different div. Originally I just wanted specials, events, then fbFriends in a row then the box div below the three divs. I have been trying to wrap the divs to control everything better but am still unsuccessful. Any help would be appreciated
specials events fbFriends
box -------------------box
<div id="specialsWrapper">
<div id="specials" ><p>Featured Specials</p></div>
<div id="events" ><p>What's happening at the hub</p></div>
<div id="fbFriends">
<div class="fb-like-box"
data-href="https://www.facebook.com/pages/********"
data-height="395" data-width="250" data-show-faces="true"
data-colorscheme="dark" data-stream="false" data-header="true" />
</div>
</div>
</div>
<div id="box" ></div>
#specialsWrapper
{
height: 450px;
width: 920px;
color: white;
}
#specials {
float: left;
border:2px dashed white;
height:390px;
width: 270px;
color: white;
margin: 25px 10px 0px 48px;
}
#specials p {
margin: 0px;
padding: 15px;
text-transform:uppercase;
font-size: 24px;
font-style: oblique;
}
#events {
float: left;
border:2px dashed white;
height:390px;
width: 270px;
color: white;
margin: 25px 15px 15px 15px;
}
#events p {
margin: 0px;
padding: 15px;
text-transform:uppercase;
font-size: 24px;
font-style: oblique;
}
#fbFriends {
float: left;
margin: 25px 15px 15px 15px;
width: 250px;
height:390px;
}
#box
{
clear: left;
border: 2px dashed white;
height: 60px;
width: 853px;
color: white;
margin: 25px 15px 15px 48px;
}
Here's anwser for your question
EXAMPLE ON CODEPEN
Your build of these box's is weird thats why I had to use top: 40px; with position: relative;
btw. that's how you do on jsfiddle or codepen exampl, thats all community ask. Spend 5 min for your question isnt much to ask?
hope thats help.
EDIT:
I found what what the issue, you didnt closed specialsWrapper div thats why margin dint work.
I also cancel margin-botton from boxes inside specialWrapper and put overflow: auto to specialWrapper to countheight.
Now top: no need to be writen.
I think what you might want it display: inline-block; but without something to see I can't really know what's going on. And your description isn't enough. Could you post what's going on on js.fiddle.net or give us an example site?
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;
}
I have some css problem. here is what I need.
No matter how many words the title have(example: title could be What's new today?, could be hello world)
it always have a background line pass through the whole div, and the word's background is white. (the word should be text-align:center; and it's background looks like broken the line)
Here is my code:
<style>
.ocell {
width:960px;
height:42px;
text-align:center;
padding: 20px 0 20px 0;
}
.wd {
margin: 0 auto;
background-col: white;
margin-left: -10px;
padding: 5px;
}
.line {
position: absolute;
border-bottom: solid 1px #999;
margin-top:-18px;
width: 960px;
}
</style>
<div class="ocell">
<div class="wd">Title</div>
<div class="line"></div>
</div>
also in http://jsfiddle.net/zApLA/ may be also can use a background-image instead of the line. Thanks.
This can be achieved by simply using div with border-bottom for the line, and positioning element with text on that line. Fiddle here.
Couple of problems with your CSS.
One - the .wd div spans the entire width of page (defaults to 100%)
Two - no z-index sset to say which div should be on top of which.
Try this code (worked in fiddle)
.ocell {
width:960px;
height:42px;
text-align:center;
padding: 20px 0 20px 0;
}
.wd {
margin: 0 auto;
background-color: #f0f;
margin-left: -10px;
padding: 5px;
font-size:20px;
z-index:10;
border:1px solid #f0f;
display:inline;
}
.line {
position: absolute;
border-bottom: solid 1px #999;
margin-top:-15px;
width: 960px;
z-index:-1;
}
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.
Hi have had to put the menu bar further down the page so javascript will load a slide show.
I am trying to then push the menu bar up. Can I put in an absolute reference so it appears a t the top.
#left, #middle, #right {
background-color: inherit;
color: inherit;
float: left;
padding-left: 10px;
padding-right: 5px;
}
#left {
width: 15%;
min-width: 10em;
padding-left: 5px;
background: #fff;
}
#middle {
width: 80%;
border-left: 3px dotted #999;;
background: #fff;
}
#header {
width: 100%;
background: #666;
}
#footer {
clear: both;
width: 100%;
background: #fff;
}
#left2 {
width: 15%;
min-width: 10em;
padding-left: 5px;
background: #fff;
margin-top: -500px
}
#middle2 {
width: 80%;
border-left: 3px dotted #999;;
padding top: 500px
}
In Html
<div id="middle2">
<div id="left2">
Although it is completely unclear in your code what the 'menu bar' is, or which class might apply to it, it seems to me you should try absolute positioning in CSS
CSS:
.menubar
{
position:absolute;
top:20px;
left:20px;
}
html:
<div id="some_menu_bar" class="menubar">
your menu goes here
</div>
I am trying to then push the menu bar up.
This makes me think you hope to delay the positioning of the menu bar until some script has executed. You cannot do this with CSS alone*.
*Ok perhaps you can with CSS3 and animations but this isn't well supported at the moment.