I'm having trouble with WordPress, nesting box within a box.
Outside of WordPress this works fine. I'm sure there's just one or two parameters wrong.
The outer box is dp23, the inner box is dp22
For some reason there is spacing between the inner boxes (dp22) .
you can see the problem here: http://4tepiano.com/recommended-piano-books-2/
CSS code:
.dp101
{
float:left;
width:100%;
border:1px solid green;
display: inline;
clear: both;
margin:auto;
}
.dp75 {
width:84%;
border-color:gray;
border-style:solid;
border-width:1px;
overflow:auto;
float: right;
text- align:left;
padding:10px;
}
.dp22 {
border:1px solid red;
HEIGHT: 1.2em;
margin:1px;
padding:1px;
font-size: .8em;
overflow:auto;
display: block;
}
.dp23 {
width:12%;
border:1px solid green;
float:left;
margin:1px;
padding:1px;
}
[edited]
.dp23 p {
display: none;
}
Html Code:
<div class="dp101" style="BACKGROUND-COLOR: #fdfcdc">
<div class="dp23" style="HEIGHT: 150px";><!--Left Column-->
<!--category--> <div class="dp22"> category </div>
<!--Title--> <div class="dp22" > Title </div>
<!--Author--> <div class="dp22" > Author </div>
<!--Price--> <div class="dp22"> Price </div>
<!--Link--> <div class="dp22"> Amazon Link </div>
<!--Cover--> <div class="dp22" style= "HEIGHT: 85px"; > Cover </div>
</div> <!--End-Left Column-->
<!--Right Column-->
<div class="dp75"style="HEIGHT: 150px"; >
Work in progress.
</div> <!--End-Right Column-->
<div class="dp75" style="HEIGHT: 10px";> <!--Right spacer--> </div>
I have used borders to make it easy to see. The boxes should be stacked together, with the borders touching each other.
You have random <p> tags in your code between your dp22 <div>s. They look somewhat like this:
<p>
<!--Author-->
</p>
Remove them or include the following code in your CSS:
p {
display: none;
}
Though that may cause other problems if you are actually using <p> tags elsewhere.
You have empty <p> tags between those elements - they actually have comments in them..
Remove the <p> elements between dp22, and your problem is solved.
Because your coding above doesn't demonstrate this, I am going to assume that wordpress is generating these <p> tags.. I suggest removing all the unnecessary spacing in your HTML.
Related
I've got two divs and would like to align their baselines. However, one of the divs has more than one line of text and some embedded content, and while I'd like to align them to the top baselines, the browser seems to align to the bottom one.
I've built a JSFiddle here to illustrate, with the following HTML:
<div style='display:inline-block;'>NOTE:</div>
<div style='display:inline-block; width:200px;'>
Here's <div class='embedded'></div> an embedded div and more text
</div>
and CSS:
.embedded {
width:40px;
height:40px;
display:inline-block;
vertical-align:-15px;
border:1px solid black;
}
What I'd like is this:
What I get is this:
A pure-CSS solution would be nice, but I'm not against using JavaScript here either. Any help would be greatly appreciated!
You can do it quite simply with a wrapping div and a bit of flex box.
.wrapper {
display: flex;
align-items: baseline;
}
.note {
margin-right: 1ch;
}
.embedded {
width: 40px;
height: 40px;
display: inline-block;
vertical-align: -15px;
border: 1px solid black;
}
<div class="wrapper">
<div class="note" style='display:inline-block;'>NOTE:</div>
<div style='display:inline-block; width:200px;'>
Here's <div class='embedded'></div> an embedded div and more text
</div>
</div>
This will solve your issue:
`<div style="display: flex;">
<div style="padding-top: 13px;">NOTE: </div>
<div>
<p style="display:inline">
Here's
<span class='embedded'></span>
an embedded div
<br/>
and more text
</p>
</div>
</div>`
Link : JSFiddle
<div align="center">
<div class="se" style="width:60px;height:60px;"><img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/></div>
<div class="uk" style="width:60px;height:60px;"><img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/></div>
<div class="de" style="width:60px;height:60px;"><img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/></div></div>
<div> i dont want this menu div to jump up and down when hover</div>
css file:
.se {margin-top:-30px;}
.se:hover {margin-top:-15px;}
.uk {margin-top:-60px; margin-left:-150px;}
.uk:hover {margin-top:-45px;}
.de{margin-top:-60px; margin-left:150px;}
.de:hover {margin-top:-45px;}
I just want the flags to slide down when hover. As you see in my fiddle, it's acting strange depending on with flag i hover first.
This could probably be solved in an easier way? http://jsfiddle.net/XScjm/1/
I think you are in the wrong way to acomplish what you want, first you can't offset the image with margin because that affects all arround the element. And the way you are trying to position each <div> with margin is unrecommended.
Try to do it this way:
.center {
text-align:center;
}
.se, .uk, .de {
position:relative;
display:inline-block;
cursor:pointer;
}
.se:hover, .uk:hover, .de:hover {
top:15px;
}
Check this Demo
Have a look at this one :-
DEMO
<div align="center" class="one"></div>
.one{ height: 60px; }
try this:
.se, .uk, .de {
float: left;
margin-right: 5px;
margin-top: -40px;
}
.se:hover img, .uk:hover img, .de:hover img {
margin-top: 20px;
}
This will work. JSFiddle.
HTML
<div id="center" align="center">
<div class="flag" style="width:60px;height:60px;">
<img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/>
</div>
<div class="flag" style="width:60px;height:60px;">
<img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/>
</div>
<div class="flag" style="width:60px;height:60px;">
<img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/>
</div>
</div>
<div> i dont want this menu div to jump up and down when hover</div>
CSS
.flag {margin-top:-30px; position:relative; display:inline-block;}
.flag:hover { top:15px; }
#center { height: 50px; }
This code:
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div id="columns">
text
</div>
Is coded with this css:
#columns {
width: 200px;
float: left;
margin-left: 20px;
margin-right: 20px;
}
The problem is that if I put any text below the three columns created, it just adds another column! I want the footer to be below these columns, but I can only do this so far by setting this:
footer {
/*height: 50px;*/
text-align: center;
position:absolute;
bottom:0;
}
And this just makes the page longer, i.e. puts a huge gap between this content and the footer.
Any solutions?
Thanks
Elements are floated left making document flow modified. Document flow needs to be reset right before writing footer. It can be done by setting property clear:both for the footer (in fact just after .columns are finished).
A working jsfiddle is here.
CSS:
footer{
clear: both;
}
Suggestion (outside scope of question):
You should change id="columns" to class="columns" as in valid html markup, id's should be unique. (thanks michael)
try this
demo
css
*{
margin:0;
padding:0;
}
#columns {
width: 200px;
float: left;
margin-left: 20px;
margin-right: 20px;
background-color:red;
}
.clearfix{
clear:both;
}
footer {
/*height: 50px;*/
text-align: center;
position:absolute;
border:1px solid red;
}
html
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div class="clearfix"></div>
<footer>footer</footer>
When using any floated items, the default behavior is for them not to count towards other content in that area, so they'd appear to one side of other content.
Of course, if you want to prevent that, the clear property will essentially continue below any floated items on one (or either) side before it.
footer {
height: 50px;
clear: both; /* can also use `clear: left` here */
}
try after removeing bottom:0; and put below html code after third column
<div id='footer'>
<p>Footer Content</p>
</div>
You need to use the css clear for your problem
like clear :both for id/class of you div
text
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div style="clear:both"></div>
<footer>footer</footer>
I've looked at so many posts on this I'm at a loss as to why its not working for me.
.firstCell
{
float:left;
width:40%;
text-align:right;
align:right;
border:1px solid white;
}
.cell
{
float:left;
width:auto;
align:left;
text-align:left;
border:1px solid white;
}
.newRow
{
clear:both;
width:100%;
}
.container
{
width:100%;
background-color:#DEEFF8;
margin:0px auto;
}
So, I basically have this:
<div class="container">
*Within this I have sections of like a form*
<div style="width:400px;border:1px solid black;">
<div class='firstCell'>File Name:</div>
<div class='cell'><html:text property="fileName" /></div>
<div class='cell' style='color:red;'>(Max 50 character)</div>
<div class='newRow'></div>
<div class='firstCell'>Copy Book Name:</div>
<div class='cell'><html:text property="copyBookName"/></div>
<div class='newRow'></div>
<div class='firstCell'><html:button property="populateFields" value="Populate Fields" onclick="showFields();"/></div>
<div class='newRow'></div>
<div class='newRow'></div>
</div>
*So this is one section, what I would like to happen is to position my form elements in this and then have it all be centered on the main div
</div>
Your main .container has 100% width, it doesn't matter if you center it, it will still start drawing it from the very left. The div inside of it that's responsible for the left-aligned box has no id/class, and you're doing no aligning on it. Technically your main container is centered, but everything inside of it is left-aligned.
Do you mean like this? http://jsfiddle.net/36ujG/
It's a little hard to understand what you are trying to center. All I did was added margin: 0 auto to the child div of container.
I'm displaying a list of links for voting, similar to Hacker News. I want the following layout for each link:
The gray boxes highlight the four divs for each link listed.
The key thing I need to do is get the "other text" div to be left-aligned with the link headline text.
I could define the width of the rank and arrow divs (the two little boxes), of course, and then indent the other text div accordingly. But this implementation has some downsides relative to my specific needs -- which I won't go into -- and more importantly, I just feel like there should be a more elegant way to achieve this. Something like a clear bottom for the rank and arrow divs, or maybe a property of the link headline div that tells the following div to appear directly below it.
Any ideas?
Why not just put the two right containers in one?
<div class="rank">9</div>
<div class="arrow">arrow</div>
<div class="content">
<div class="row1">Link headline text</div>
<div class="row2">other text</div>
</div>
<br class="clear" />
style:
.rank, .arrow, .content {
float: left;
}
.clear {
clear: left;
}
EDIT: Demo on jsfiddle
Solution 1
It seems that all four boxes for each item are in one bigger box (li maybe), so I would use:
<li>
<span class="num"></span>
<span class="upvote"></span>
<span class="main">main text</span>
<span class="add">more text</span>
</li>
and
.add { clear: both; float: right; }
Solution 2
Other solution would be padding on parent of each group of four and then negative margin-left together with float: left on number and upvote links.
Anything better can be tailored to your needs, but we need to see HTML :)
I'd go for a combination of the answers given by #Adam and #Czechnology, and use a list to display the content, and put the Link headline text and other text boxes into a single parent div. Like so:
HTML:
<ol class="headlines">
<li class="news-item">
<div class="rank">9</div>
<div class="arrow"><img src="arrow.png" /></div>
<div class="content">
<h2>Link headline text</h2>
<div class="additional-content">other text</div>
</div>
</li>
<li class="news-item">
<div class="rank">10</div>
<div class="arrow"><img src="arrow.png" /></div>
<div class="content">
<h2>Link headline text</h2>
<div class="additional-content">other text</div>
</div>
</li>
</ol>
Style:
ol.headlines {
display:block;
list-style-type:none;
list-style-position:outside;
margin:0;
padding:0;
}
div {
border:1px solid #00F;
}
ol.headlines .rank, ol.headlines .arrow, ol.headlines .content {
float:left;
}
.news-item {
clear:left;
}
ol.headlines h2,
ol.headlines .additional-content {
display:block;
}
You can find a sample of this here: http://jsfiddle.net/DEWtA/
Note that you'll need to alter the CSS to your needs with regards to the size of the divs and such.
Why not provide a wrapper element for the link headline text and the other text? Then float the wrapper instead.
http://jsfiddle.net/userdude/H3qPt/
HTML
<div class="linkblock">
<span class="score">100</span>
<span class="arrow">^</span>
<div class="linkdata">
<div class="linkurl">Link headline</div>
<div class="linktext">Other text</div>
</div>
<br/>
</div>
CSS
Some of this is just for demonstration.
.linkblock .score,
.linkblock .arrow,
.linkblock .linkdata {
float: left;
}
.linkblock br {
clear: both;
}
div, span {
border: 2px solid #ddd;
margin: 4px;
padding: 3px;
}
div.linkdata {
border: none;
padding: 0;
margin: 0;
}
You can contain the those two things into divs and then for the left div with the voting stuff, label the div with a class, "vote", and have the following CSS:
.vote {
margin: 0 0 100%;
}
I haven't tested it, but it should work like a charm.
Caveat: Doesn't work well with responsive design :(
The best solution would probably be to wrap 'link headline text' and 'other text' within a 'div' and use 'overflow: hidden;' on it.