I have 4 different divs assigned as: header1, header2, content1 and content2, each one floating to a specific side (left or right) as shown in the image1
So far everything works fine:)! also Added a #media for the responsive result, so if the browser is smaller than 750px then everything become 100% wide.
And here's my problem, I'm trying to show elements like in this second image:
But so far, Header 2 is showing just under header1 and I'm trying to locate first the content 1 before showing the header 2 with his respective content 2, could you help me to solve this? here's my actual jsfiddle and my code:
DEMO
HTML
<div id="container">
<div id="header1">
<h2 class="header1">
Header 1
</h2>
</div>
<div id="header2">
<h2 class="header2">
Header 2
</h2>
</div>
<div id="content1">
content1
</div>
<div id="content2">
content2
</div>
</div>
Thanks for your help!
If it is acceptable for you, you can combine header with content.
See http://jsfiddle.net/pbrzt7er/
<div class='left container'>
<div class='header'>
Header left
</div>
<div class='content'>
Content left
</div>
</div>
<div class='right container'>
<div class='header'>
Header right
</div>
<div class='content'>
Content right
</div>
</div>
Related
I would like to place my logo on the border of two divs. I've two questions:
In which div should I place this logo: in div above or in div below or maybe put in another div?
How can I position it. I tried absolute and relative but it doesn't work.
It should looks like:
HTML
<!-- Favorites -->
<section class="favorites">
<h2 class="favorites-header">Urban Favorites</h2>
<div class="favorites-box">
<img src="img/burger-craft-burgers-e1497746930767.png">
<div class="favorites-info">
<h2>Craft Your Own Burger</h2>
<p>Always get exactly what you want with this build-your-own classic. Always get exactly what you want with this build-your-own classic.</p>
</div>
</div>
<div class="favorites-box-last">
<img src="img/burger-craft-fries.jpg">
<div class="favorites-info">
<h2>Loaded Cheese Fries</h2>
<p>Always get exactly what you want with this build-your-own classic. Always get exactly what you want with this build-your-own classic.</p>
</div>
</div>
<!-- Here is my logo --> <img class="favorites-logo" src="img/urban8-logo-shadow.png" alt="logo-shadow">
</section>
<!-- Review -->
<section class="review">
<div class="review-element">
<p>"Great meals!"</p>
<img src="img/five-stars.png">
<p>-Jane Doe</p>
</div>
<div class="review-element">
<p>"Awesome atmosphere!"</p>
<img src="img/five-stars.png">
<p>-Aicia Fox</p>
</div>
<div class="review-element">
<p>"Everything is ok"</p>
<img src="img/five-stars.png">
<p>-Cesar Algir</p>
</div>
<button>Leave a Review</button>
</section>
My website shows different articles each in one thumbnail.
The problem is that the thumbnails seems to float everywhere. They are not aligned as it should be.
This is how my HTML code looks like.
</head>
<body>
<div class="top-bar">
<div class="logo"></div>
</div>
<div class="title-bar">
</div>
<br></br>
<div class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="[PIC]" width="300" />
<div class="caption">
<h3>
[Name]
</h3>
<p>
[Text]
</p>
<p>
<a class="btn btn-primary" href="index.php?action=DETAILE&id=[ID]">Go!</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
The result is that the columns are not aligned. There are 3 columns next to each other, but the height differs, as well the position on the page.
How can I solve this?
Now it looks like a staircase like in the code with the
I want:
Box 1. Box2. Box 3.
Bootstrap 3 column layout will be like
<div class="col-md-12">
<div class="row">
<div class="col-md-4">.col1</div>
<div class="col-md-4">.col2</div>
<div class="col-md-4">.col3</div>
</div>
</div>
To maintain equal height for all boxes assign equal height for all images,h3 and p tags(which are in the box)
Example snippet https://bootsnipp.com/snippets/featured/store-product-layout
and in your html code there are many closing < /div> tags check html validations once.
I am using bootstrap and in my first row i have 2 side one contain picture and other div but image size is larger the left side div so my 2nd row div come after picture. but my requirement is make 2nd row div just below the first row div? Picture here
<div class="container"> // Container for two side contents
<div class ="row"> // single row
<div class ="Row1">
// Your's Row1 code goes here
</div>
<div class="Row2">
// Your's Row2 code goes here
</div>
</div>
</div>
<div class="container"> // Container for main contents(gallery and big image)
...
</div>
You should seperate the blocks like:
<div class="overall-container">
<div class="left-block" style="width: 30%;">
// add your navigation blocks here
</div>
<div class="right-block" style="width: 70%;">
//add page content here
</div>
</div>
Make Another Row in yours first row.
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-8"></div>
</div>
</div>
I'm trying to make a simple page header with bootstrap 3. Here's the code:
<div class="page-header">
<h1>Text on the left</h1>
<h3 class="text-right">This to the right but on the same line</h3>
</div>
Here's a jsfiddle to try: http://jsfiddle.net/DTcHh/2450/
Basically I just want to have text on the left and right inside the page-header, but on the same line.
The usual tricks of using float:left and float:right as with normal html "break" the page-header, meaning the text is properly aligned but is displayed outside (under) the page-header, which remains empty.
Any clues?
you can use "pull-right" and "pull-left" classes, with "clearfix" class after.
(Bootstrap 3)
<div class="page-header">
<div class="pull-left">
<h1>Text on the left</h1>
</div>
<div class="pull-right">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
<div class="clearfix"></div>
</div>
also you can adjust line height on the h3 tag in the right, if you want to match with h1
Fiddle for Bootstrap 3: https://jsfiddle.net/darkosss/dy9wjk2q/
(as of Bootstrap 4.1)
use float-left and float-right instead. You still need the clearfix.
<div class="page-header">
<div class="float-left">
<h1>Text on the left</h1>
</div>
<div class="float-right">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
<div class="clearfix"></div>
</div>
Fiddle for Bootstrap 4: https://jsfiddle.net/darkosss/eozs65qb/
if you are using Bootstrap, you should do something like
<div class="page-header">
<div class="row">
<div class="col-md-6">
<h1>Text on the left</h1>
</div>
<div class="col-md-6">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
</div>
</div>
if you want to "stylize" the h1, h2, etc, change it to "display:block" and you'll have to add a "width" attribute anyway
use the following structure to position with bootstrap:
<div class= 'container'>
<div class='row'>
<div class ='md-col-4'>
<h1>Text on the left</h1>
</div>
<div class = 'md-col-4.col-md-offset-4'>
<h3 class='text-right'>This to the right but on the same line</h3>
</div>
</div>
Think of the row as a grid across of 12. So fist 4 left 3rd. 2nd div is the 3rd third with a 4 grid offset or gap.
http://getbootstrap.com/css/
I have the following:
<!-- BLUE BOX --!>
<div style="width:100%;position:relative;min-height:100%">
<div style="position:absolute;left:1px;top:15px;">
IMAGE GOES HERE
</div>
<div style="position:absolute;left:20px;top:0;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">
messages go here
</div>
</div>
<!-- PINK BOX --!>
<div style="width:100%;position:relative;min-height:100%">
<div style="position:absolute;right:1px;top:15px;">
IMAGE HERE
</div>
<div style="position:absolute;right:20px;top:0;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">
messages go here
</div>
</div>
here is the image of the HTML output:
Please help me getting those divs in vertical order, I don't want them to float over each other, I want the message div to get the automatic height according to content too.
You should use floats for this. float:left , float:right and a clear:both inbetween :
<div style="width:100%;position:relative;min-height:100%;float:left">
<div style="float:left">img</div>
<div style="float:left;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">First messages go here</div>
</div>
<div style="clear:both;width:100%;position:relative;min-height:100%">
<div style="float:right">img</div>
<div style="float:right;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">messages go here</div>
</div>
You can see it in action here : jsfiddle
Remove absolute position form your message DIV. Write like this:
<div style="position:relative;">
<div style="position:absolute;left:1px;top:15px;">
IMAGE GOES HERE
</div>
<div style="margin-left:20px;margin-right:20%;background-color:#2b5797; color:#fff;min-height:40px;border-radius:5px;padding:10px;">
messages go here
</div>
</div>
<div style="position:relative;">
<div style="position:absolute;right:1px;top:15px;">
IMAGE HERE
</div>
<div style="margin-right:20px;margin-left:20%;background-color:#b91d47; color:#fff;border-radius:5px;padding:10px;min-height:40px">
messages go here
</div>
</div>
Check this http://jsfiddle.net/y44NC/2/