I have a box that contain some text and another box that contain a video.
Here's the jsfiddle
Codes:
CSS:
.bluebox{
background-color: #1EAECE;
}
.orangebox{
background-color: #FF8800;
}
HTML:
<div style="margin-top: -13px;">
<div class="bluebox" style="display: table-cell;width: 52.2%;">
<div class="title">Usage</div>
<ul>
<li>Moisten with warm water to activate the ingredients.</li>
<li>Apply the bar directly on face & body.</li>
<li>Massage the creamy texture into your skin.</li>
<li>Allow the emulsion time to permeate into the skin.</li>
<li>Rinse off.</li>
</ul>
<p>Suitable for Face wash, Body wash, Shaving, Sensitive areas, Intimate parts, Shower & Bath.</p>
</div>
<div style="display: table-cell;width: 0.7%;"></div>
<div class="orangebox" style="display: table-cell;width: 47.3%;">
<video width="418" src="http://brexes.com/Images%20and%20Videos/GamilaSecretVideo.mp4" controls></video>
</div>
</div>
The first box that contain text have a huge space on the top, I want to remove this space and set the two divs in the same line.
So here's how it looks like:
Here's how it should be like:
Add a basic:
vertical-align: top;
to your class ".bluebox"
Related
Title says all basically. I want the text right next to the slideshow.
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<h2 id="wexford">17 My Street - Some Town, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
H tags have a specific purpose, to act as a header under which other content will fall. To use h tags side by side goes against their intended use (and is invalid html). The span tag does what an H tag does, but is an inline element (display:inline), where a H tag is a block level element (and acts like a div)(display:block). You can change the 'display' property of an H tag's css to do what a span does.
With that in mind, I would actually use 'display:inline-block' in your situation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1 {
display: inline-block;
}
h2.asCouple {
display: inline-block;
margin-left: 15px;
}
</style>
</head>
<body>
<div>
<h1>Topic - <h2 class="asCouple">Subtopic</h2></h1>
</div>
</body>
</html>
Hope this helps.
You can do it inline when declaring the HTML element, I did something like this:
<h6 style="display: inline">Posted by <h4 style="display: inline">{{.}}</h4></h6>
By doing this, you don't change the style of all <hSOMETHING> elements
<div class="displayBorder">
<div class="displayContainer">
<div class="displayTable">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">Location</h2> <br />
<h3>$1,249,999</h3>
<p>Custom Built Home With Every Bell And Whistle !/ Ch Colonial With 6 Generous Bdrms, 2 Master Suites Or Use Lge Area For Office, 5 Full Baths, Wood Floors Thru-Out, Granite Eik W/ Center Isle, Top Appliances, Andersen Windows, Lots Of Details, Full Finished Basement W/ Ose, Full Wet Bar, Theater Tv Area, Playrm, Lots Of Storage, Custom Freeform Salt Pool, Custom Pool House</p>
</div>
</div>
<button class="learn-btn">LEARN MORE</button>
</div>
#Jared Scarito is this what you need??
CSS
.displayContainer{
display:table;
}
.photoContainer,.txt-con{
display:table-cell;
vertical-align:middle;
}
HTML
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')">
<</div> <img src="https://i.stack.imgur.com/rhy46.png" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">1234 My Street - Sometown, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
</div>
changed the image to demonstrate
Pretty much the same HTML, added extra div around h3 and h2..
I am trying to get an image aligned right of some text/lists while having the image still be 100% in height and within the div. So far I've come close but the image is always overlapping the bottom of the div. Here's an example of what I'm trying to achieve:
Here's the code I've come up with so far, I've been using inline CSS but once I've figured it out it'll be in a separate CSS file. Any help is really appreciated, been trying to figure this out for days!
<div style="background: #000; width: 90%; color: #fff; margin: 0 auto; text-align:left; border: 1px solid #95403c;">
<p>
<img style="float: right; margin: 1px 1px 1px 1px; width: 355px;" src="" />
<div align="center">
<h1>Gold (proper style coming soon)</h1><br />
<clear>
<u>All Edited Videos Include:</u>
<ul style="display: inline-block; text-align: left;">
<li>60-90 Minute Interview Documentary</li>
<ul><li>B-Roll Footage</li>
<li>Incorporation of personal video clips (up to 15) and photographs (up to 125)</li>
<li>Interview Transcript</li></ul>
<li>1-2 Minute Individual Clips of Family Members </li>
<li>Up to 5 individuals will share a favorite memory with or express their love for the subject </li>
<li>5-10 Minute Prized Possession</li>
<li>The subject will share and describe their most prized possession</li>
<li>Behind The Scenes Photographs</li></ul>
</ul>
<clear>
<div style=" display: inline-block; vertical-align: top;">
<u>You Will Receive:</u>
<ul style="display: inline-block; text-align: left;">
<li>USB flash drive with all edited video files,<br /> pictures, and interview transcript</li>
<li>15 DVDs</li>
<ul><li>Customized printed DVDs</li>
<li>Customized menu and chapters</li>
<li>Hard cases with customized insert</li></ul>
</ul></div>
<div style="display: inline-block; vertical-align: top;">
<u>All Edited Videos Include:</u>
<ul style="display: inline-block; text-align: left;">
<li>Customized Titles</li>
<li>Customized Graphics</li>
<li>Music</li>
<li>Sound Design</li>
<li>Color Correction</li>
</ul>
</div>
<clear>
<br style="clear: both;" /></p>
</div>
I have the following markup for a div of content that's being dynamically pulled from a .json file:
<div class="subSection">
<div ng-repeat="content in subSection.content" class="subSection_content">
<div class="table_container">
<p ng-if="content.type =='table_p'" ng-bind-html="content.content" class="{{content.class}}"></p>
<ul ng-if="content.type == 'table_ul'" class="{{content.class}}">
<li ng-repeat="li in content.content track by $index" ng-bind-html="li.item"></li>
</ul>
</div>
</div>
</div>
And the following CSS that applies to this div:
div.table_container {
background-color: #a9c7e1;
width: 100%;
}
p.table_img_p {
background-color: #0090c3;
color: #FFFFFF;
margin: 0;
padding: 0.5em;
}
.table_img_list {
padding: 0.5em;
}
#media only screen and (min-width: 720px){
div.subSection {
width: 100%;
}
div.subSection_content {
width: 100%;
}
div.table_container {
width: 50%;
float: left;
}
}
And here's what's it giving me instead of floating the divs to the left. It treats the elements within that div as individual divs. >.< Clearing anything at all doesn't help. Suggestions?
And here's the output code (HTML). Nothing odd going on in CSS.
<div class="subSection">
<div class="subSection_content ng-scope">
<p class="firstP">One way that toxicity can be measured is by its specific effect on an organ or organs. The kidneys and liver are most commonly associated with toxicity because of their primary roles in metabolism, detoxification, and excretion. However, all body organs can be affected including the skin, brain, heart, lungs, and gastrointestinal organs.</p>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<p class="table_img_p">Symptoms of Liver Damage</p>
</div>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<ul class="table_img_list">
<li class="ng-binding ng-scope">Jaundiced skin or eyes</li>
<li class="ng-binding ng-scope">Abdominal pain</li>
<li class="ng-binding ng-scope">Nausea</li>
<li class="ng-binding ng-scope">Discolored or bloody waste secretions</li>
<li class="ng-binding ng-scope">Fatigue</li>
<li class="ng-binding ng-scope">Anorexia</li>
</ul>
</div>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<p class="table_img_p">Symptoms of Kidney Damage</p>
</div>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<ul class="table_img_list">
<li class="ng-binding ng-scope">Hypertension</li>
<li class="ng-binding ng-scope">Nausea</li>
<li class="ng-binding ng-scope">Edema</li>
<li class="ng-binding ng-scope">Fatigue</li>
<li class="ng-binding ng-scope">Anorexia</li>
<li class="ng-binding ng-scope">Change in urine output</li>
<li class="ng-binding ng-scope">Chest pain and shortness of breath</li>
</ul>
</div>
</div>
What's wanted: on mobile it should be 1 column (two blue boxes one under the other), and on larger views it should be two columns (two blue boxes next to each other). I've done styling of this kind of thing many times before and never had such difficulty styling it. Just looking for suggestions on what is going on that it doesn't want to float on "1 line" next to each other.
NOTE: OP has updated question with visual example since this answer was provided.
You haven't given a clear definition of what you'd like to achieve but I'll take a stab at it.
I'm going to assume the following:
That the light blue DIV should be under the darker blue DIV.
That the darker blue DIV is the header for the light blue DIV.
That each dark blue DIV and light blue DIV will be treated is one item/gropu/etc.
That on smaller screens the Liver Damage group appears above the Kidney Damage group.
That on larger screens the Liver Damage group appears to the left of the Kidney Damage group.
If so, then the issue is the way you're conditionally outputting your content/markup. The template doesn't match the output markup you've provided. Each header is nested in the same set of DIVs as its associated content.
<div class="subSection_content ng-scope">
<div class="table_container">
<p><!-- header --></p>
</div>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<ul><!-- content --></ul>
</div>
</div>
I would expect to see something like this if my assumptions are correct:
<div class="subSection_content ng-scope">
<div class="table_container">
<p><!-- header --></p>
<ul><!-- content --></ul>
</div>
</div>
Which match your template but not output markup. This would get you the results you are looking for with the supplied CSS, http://jsfiddle.net/kqwpheh9/. The jsFiddle doesn't include any spacing between the lists, you'll have to include that later.
It appears your .table_container and .subSection_content DIVs might be redundant, among other markup considerations.
Add `float:left' in css as follows
div.subSection_content {
width: 100%;
float:left;
}
complete code:-
div.table_container {
background-color: #a9c7e1;
width: 100%;
}
p.table_img_p {
background-color: #0090c3;
color: #FFFFFF;
margin: 0;
padding: 0.5em;
}
.table_img_list {
padding: 0.5em;
}
#media only screen and (min-width: 720px){
div.subSection {
width: 100%;
}
div.subSection_content {
width: 100%;
float: left;
}
div.table_container {
width: 50%;
float: left;
}
}
I'm using the Angular-slider
http://ngmodules.org/modules/angular-slider.
Everything works with one exception - I cannot get the slider bar to conform to the margins.
My goal is to have the slider in the center of the page padded on each side with about 20% white space on each side.
<div style="text-align: center;">
....
<div style="margin: 40px 0 60px 0; font-size: 10pt;">
<div style="width:20px">
<a style="text-align: left; margin-left: 20%;margin-right: 20%">
<slider floor="0" ceiling="500" step="50" precision="2" ng-model="cost"></slider>
</a>
</div>
</div>
</div>
Not sure if it helps, but you can try to set:
position: relative;
left: 20%;
right: 20%;
I don't know why are you trying to do that and styling the <a> element, but from the code in Angular's page you should use something like this:
<ul>
<li ng-repeat="item in items">
<p>Name: </p>
<p>Cost: </p>
<slider floor="100" ceiling="1000" step="50" precision="2" ng-model="item.cost"></slider>
</li>
</ul>
so, to adapt to your case:
<div class="container">
<ul>
<li ng-repeat="item in items">
<p>Name: </p>
<p>Cost: </p>
<slider floor="100" ceiling="1000" step="50" precision="2" ng-model="item.cost"></slider>
</li>
</ul>
</div>
Now, the CSS is as easy as this:
.container{text-align:center}
ul{width:60%; margin:20px auto} /* adjust vertical margins to your needs */
li{....}
Note that this example use a construction of UL and LI, but you can obviously replace it with DIV using the same logic. Not sure why you want an A, but try it out, maybe it works, I just don't understand teh need and probably need more information.
I am having issues with the document flow when floating a div to the left and another div to the right.
Both divs left and right are aligned perfectly horizontally with one another. (Menu Item name and menu item price)
However the following Menu Category Name (Burgers) and Menu Category description is starts all the way on the top. Right below the first Menu Category (Breakfast)
I have set Menu Item Name Div to float left and clear left. I did the same with menu item price, but instead I floated right and clear right.
The "Burgers" category and its description needs to show below the last menu item name and price which is. "Oatmeal 3.50"
Doesn't the burgers category needs to follow normal document flow when clearing broth divs?
I have tried changing the .menu_item_name css to display as inline_block , that solved the issue but the menu prices wouldn't line up with the menu items.
Can you guys please help me resolve this issue? I would much appreciate it.
Below is a link to a js fiddle example.
http://jsfiddle.net/eldan88/NkH74/
<style>
#menu_container {
width: 750px;
margin-left: auto;
margin-right: auto;
}
#menu_left_wrapper {
width: 350px;
float: left;
clear: left;
padding-right: 25px;
border-right:thick solid #ff0000;
}
#menu_right_wrapper {
width: 350px;
float: right;
clear: right;
}
.menu_item_name a {
float: left;
clear: left;
}
.menu_item_price {
float: right;
clear: right;
}
</style>
HTML:
<div id='menu_left_wrapper'>
<div class='menu_category'>Breakfast</div>
<div class='menu_item_name'>
<a href='/menus/item-detail.php' > H&H Bagel </a>
</div>
<div class='menu_item_price'>
1.00<img class='item_image' src='21404.jpg' width='15px' height='15' />
</div>
<div class='menu_item_name'>
<a href='/menus/item-detail.php' > One Egg Sandwich </a>
</div>
<div class='menu_item_price'>1.75</div>
<div class='menu_item_name'>
<a href='/menus/item-detail.php' > Breakfast Platter </a>
</div>
<div class='menu_item_price'>4.25</div>
<div class='menu_item_name'>
<a href='/menus/item-detail.php' > Create your own egg sandwich </a>
</div>
<div class='menu_item_price'>3.25</div>
<div class='menu_item_name'>
<a href='/menus/item-detail.php' > Two Pancakes and Two Eggs </a>
</div>
<div class='menu_item_price'>4.75</div>
<div class='menu_item_name'>
<a href='/menus/item-detail.php' > Oatmeal </a>
</div>
<div class='menu_item_price'>3.50</div>
<div class='menu_category'>Burgers</div>
Our certified Angus beef burgers are grilled to order and served on a toasted brioche bun with lettuce and tomato, pickles and red onion upon request
<div class='menu_category'>Mexican Quesadillas</div>
<div class='menu_category'>Salad </div>
<div class='menu_category'>Cold Beverages</div>
</div>
This is all you need: http://jsfiddle.net/NkH74/2/
<div class='menu_item_name'>
<a href='/menus/item-detail.php'> H&H Bagel </a>
<span class="menu_item_price">1.00</span>
</div>
#menu_left_wrapper {
width: 350px;
padding-right: 25px;
border-right:thick solid #ff0000;
}
.menu_item_name span{
float:right;
}
really.
What I did is I used a common parent for both the link and price.
Try inserting a clearing div above Menu Category Name:
<div class="clr"></div>
.clr { width: 100%; height: 0; clear: both; }
simply you can insert a new div with clear before the Burgers Category
<div id='menu_left_wrapper'><div class='menu_category'>Breakfast</div>
<div class='menu_item_name'><a href='/menus/item-detail.php' > H&H Bagel </a></div><div class='menu_item_price'>1.00<img class='item_image' src='21404.jpg' width='15px' height='15' /></div>
<div class='menu_item_name'><a href='/menus/item-detail.php' > One Egg Sandwich </a></div><div class='menu_item_price'>1.75</div>
<div class='menu_item_name'><a href='/menus/item-detail.php' > Breakfast Platter </a></div><div class='menu_item_price'>4.25</div>
<div class='menu_item_name'><a href='/menus/item-detail.php' > Create your own egg sandwich </a></div><div class='menu_item_price'>3.25</div>
<div class='menu_item_name'><a href='/menus/item-detail.php' > Two Pancakes and Two Eggs </a></div><div class='menu_item_price'>4.75</div>
<div class='menu_item_name'><a href='/menus/item-detail.php' > Oatmeal </a></div><div class='menu_item_price'>3.50</div>
<div style="clear: both;"></div>
<div class='menu_category'>Burgers</div>
Our certified Angus beef burgers are grilled to order and served on a toasted brioche bun with lettuce and tomato, pickles and red onion upon request
<div class='menu_category'>Mexican Quesadillas</div>
<div class='menu_category'>Salad </div>
<div class='menu_category'>Cold Beverages</div>
</div>
I updated your fiddle and I think everything lines up as expected. It's not elegant but it works.
http://jsfiddle.net/mlnmln/WG5TK/2/
CSS:
.menu_item_name {
float: left;
clear: left;
}
.menu_item_price {
text-align: right;
}
Doesn't the burgers category needs to follow normal document flow when clearing broth divs?
The burger category itself doesn't follow normal document flow because you need to clear after an element, not within it to restore normal flow.
Bonus points: As others have stated it would probably be better to wrap .menu_item_name and .menu_item_price in a parent element and apply a clearfix.(What methods of ‘clearfix’ can I use?).