I'm having problems clearing some overflow between left and right floats.
My overflow goes down deep into the first parent div and I just want it to clear into the next line on the next parent div. Here is my simplified version of my code:
<div>
<div style='float:left; display:block;'>
<div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
<div style='background-color:red; clear:right'>
<div style='width:300px; position:relative; display: block; clear: both'>
asdfasdfasdfasdffadsafasdfasdfasdfasdfasdfasdfasdfasdfasdf
</div>
</div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
</div>
</div>
<div style='float;right;'>
<div>
asdfasdfasdf
</div>
<div>
asdfasdfasdf
</div>
<div>
asdfasdfasdf
</div>
<div>
asdfasdfasdf
</div>
</div>
</div>
My above example has text overlapping in the same line as the red box. How do I make the overlapping float right text drop down to the next blue box?
To answer your question easily:
your text inside the red box will always be in the red box, because is its container. So...
You put a widht limit, and the content is bigger than the container. This is known as overflow.
You can make the red box grow, or dealing with overflow with CSS overflow property: w3schools.com/cssref/pr_pos_overflow.asp
If you want to keep your width limit on your divs, you can add a blank div to match the overflowing first col div:
<div>
<div style='float:left; display:block;'>
<div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
<div style='background-color:red; clear:right'>
<div style='width:300px; clear: both'>
asdfasdfasdfasdffadsafasdfasdfasdfasdfasdfasdfasdfasdfasdf
</div>
</div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
<div style='background-color:blue'>
asdfasdfasdfasdfasdfasdf
</div>
</div>
</div>
<div style='float;right;'>
<div>
asdfasdfasdf
</div>
<div>
asdfasdfasdf
</div>
<div>
asdfasdfasdf
</div>
<div>
<br>
</div>
<div>
asdfasdfasdf
</div>
</div>
</div>
Related
I'm working on making front end design for someone but I don't have access to the css file or classes, so I can't see what's causing the container align left.
I'm looking to center the container on screen. What would be best approach? I tried wrapping div with text-align: center !important; that didn't work.
<div class="portlet-content">
<div class="portlet-content-container">
<div class="portlet-body">
<div>
<div class="container">
<div class="biography-view">
<div class="biography-item col-md-6">
<div style="border-style:none">
<div class="biographyimage" style="background-image:url(http://www.math.uni-frankfurt.de/~person/_4170854.jpg);"> </div>
<div class="caption biography-profile">
<div class="biography-profile-content">
<h3 class="full-name">Name</h3>
<p class="person-title">Company Name</p>
<p class="person-title"><strong>Person Title</strong></p>
<div class="person-biography">Biography</div>
<div class="person-biography collapse" id="readmore">More Person Info</div>
<a class="read_more" data-target="#readmore" data-toggle="collapse">Read More</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In a CSS block for the container, you can center it as follows:
margin-left: auto;
margin-right: auto;
Use inline styles <div class="portlet-content" style="text-align:center;"> or somthing yours based on css specificity mozila MDN
I'm trying to make the entire content inside the <a> tag clickable but only the text is right now.
Here a CodePen: http://codepen.io/francobermudez/pen/dvBpNw?editors=1100
HTML:
<section id="ultimos-eventos">
<div class="eventos-wrap">
<a href="#">
<div class="evento">
<div class="evento-fecha">
<div class="evento-dia">20</div>
<div class="evento-mes">MAR</div>
</div>
<div class="evento-info">
<div class="evento-titulo">This is my title</div>
<div class="evento-subtitulo">
<div class="evento-direccion"><div></div>This is my subtitle</div>
<a class="btn-evento btn-azul" href="#">Detalles</a>
</div>
</div>
</div>
</a>
</div>
</section>
You have a link inside a link (The "Detalles" text) - that cannot work. Delete the inner link (i.e. convert it to a regular text div or p tag) and you'll be able to click the whole container.
<section id="ultimos-eventos">
<div class="eventos-wrap">
<a href="#">
<div class="evento">
<div class="evento-fecha">
<div class="evento-dia">20</div>
<div class="evento-mes">MAR</div>
</div>
<div class="evento-info">
<div class="evento-titulo">This is my title</div>
<div class="evento-subtitulo">
<div class="evento-direccion"><div></div>This is my subtitle</div>
<div>Detalles</div>
</div>
</div>
</div>
</a>
</div>
</section>
http://codepen.io/anon/pen/GWbNjN?editors=1100
https://jsfiddle.net/ax26f966/
HTML:
<section id="btn">
<p>View the Newsletter</p>
<div id="facebook">
<div class="logo"><div class="recto"></div></div>
<div class="top"></div>
<div class="logo verso"></div>
</div>
<div id="shadow"><img src="http://lab.aqro.be/img/shadow.png" alt="shadow" /></div>
</section>
How can I add the text WEBSITE or something else next to the envelope, so when hovered, it also flips.
check here : jsfiddle
remove text-indent: -9999px; from #facebook
and change your html to:
View the Newsletter
<div class="logo">
<div class="recto">
<h2>WEBSITE</h2>
</div>
</div>
<div class="top"></div>
<div class="logo verso">
<h2>WEBSITE</h2>
</div>
</div>
<div id="shadow"><img src="http://lab.aqro.be/img/shadow.png" alt="shadow" /></div>
</section>
I need to make image positioned like on below picture:
I have code:
<footer>
<div class="stopka1">
<div class="container">
....................
</p>
</div>
</div>
</footer>
<div class="container">
<div class="row" style="padding-right:0; padding-left:0;padding-top:30px;padding-bottom:20px;">
<div class="col-md-6">
<div class="row">
<div class="col-xs-6"><img src="phone.png" style="vertical-align:middle !important;"> <span style="font-weight:lighter;color:rgb(10, 55, 110);font-size: 28px; vertical-align:middle !important;">22 213 18 31</span></div>
<div class="col-xs-6"><button class="col-cs-12 przycisk-pytanie" style="font-weight: bold;margin-top:0;">Zadaj pytanie</button></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-xs-2"><img src="women.png" style=""></div>
<div class="col-xs-5">.. price ..</div>
<div class="col-xs-5"><button class="przycisk-rezerwuj-big" style="font-weight: bold;height:35px;">Rezerwuj teraz</button></div>
</div>
</div>
</div>
</div>
Have someone any idea how to get this effect? I have no idea how to force it to cover higher div.
You can do one of two options:
OPTION 1
img {margin-top:-20px;}
OPTION 2
img {position:relative; top:-20px;}
I'm trying to get the horizontal grey lines to sit in front of the red background but behind the blue buttons. I've tried using z-index but I think it fails because the nested divs need to be placed in front of a div outside their containers.
Any help would be appreciated
http://jsfiddle.net/LZxxB/1/
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<!-- /header -->
<div role="main" class="ui-content" id="contentDiv">
<div class="fretboardWrapper">
<div class="strings">
<div class="string" id="stringHighE"></div>
<div class="string" id="stringB"></div>
<div class="string" id="stringG"></div>
<div class="string" id="stringD"></div>
<div class="string" id="stringA"></div>
<div class="string" id="stringLowE"></div>
</div>
<div class="stringTitle">
<div class="noteClickArea stringTitleContainerE1">
<div class="round-button" id="noteHigh0"> <span class="note">E</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerB">
<div class="round-button" id="noteB0"> <span class="note">B</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerG">
<div class="round-button" id="noteG0"> <span class="note">G</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerD">
<div class="round-button" id="noteD0"> <span class="note">D</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerA">
<div class="round-button" id="noteA0"> <span class="note">A</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerE2">
<div class="round-button" id="noteLowE0"> <span class="note">E</span>
</div>
</div>
</div>
<div class="stringTitle">
<div class="noteClickArea stringTitleContainerE1">
<div class="round-button" id="noteHigh0"> <span class="note">E</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerB">
<div class="round-button" id="noteB0"> <span class="note">B</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerG">
<div class="round-button" id="noteG0"> <span class="note">G</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerD">
<div class="round-button" id="noteD0"> <span class="note">D</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerA">
<div class="round-button" id="noteA0"> <span class="note">A</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerE2">
<div class="round-button" id="noteLowE0"> <span class="note">E</span>
</div>
</div>
</div>
</div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page -->
You were right to use z-index. But z-index only works for elements with position: relative, absolute or fixed.
I've set:
.string {
position: relative;
z-index: 2;
}
.round-button {
position: relative;
z-index: 3;
}
And removed the z-index from .stringTitle.
And it works
http://jsfiddle.net/LZxxB/2/
try this:
add position and z-index here:
.noteClickArea {
height:16.66%;
z-index:2;
position:relative;
}
and remove z-index here:
.stringTitle {
z-index:1; // REMOVE IT
}
see results here: http://jsfiddle.net/LZxxB/4/
My advice is to not touch z-indexing; Use html's implicit layer indexing;
I believe it behaves such that the first child element is topmost and the last element is bottom most, then leverage nesting. (I could have it backwards, it might be that the last element is rendered topmost)
This works best for be when using any sort of positioning, as the position can be specified independent of any z indexing, and element order can be manipulated by javascript if need be. (Assuming you anticipate using JavaScript at all)