want to have
tag in next line of
tag

Question

I tried this code and try to add different display properties to header and div tags, but image in next div tag is coming top left corner. I want it to come in next line of header tag which is on right top(pull right).This is about position of div and header tags

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet"/>


<style type="text/css">

</style>
</head>
<body style="background-color: #1D1D1D" >

<div id="main" class="">

<header class="site header" role="banner">
    <h1 id="logo" class="pull-right"><a href="/"> Logo of site</a>
    </h1>
</header>

<div id="">
    <div id="" class="">      
        <img src="Images/1157217a.jpg?w=1800&fit=max&auto=compress,format&h=1800" width="240" height="312" alt="slideshow image">
     </div>


</div>


</div>

<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/jquery-3.1.0.js"></script>
<script src="Scripts/jquery.cycle2.js"></script>
<script src="Scripts/modernizr-2.8.3.js"></script>
</body>
</html>

Possible duplicate of [div background color not setting all area](http://stackoverflow.com/questions/33995147/div-background-color-not-setting-all-area) — Bhojendra Rauniyar, Aug 24 '16 at 08:25

Webdesigner15 · Answer 1 · 2016-08-24T08:38:14.807

0

you can add class="clearfix" after the header tag and then the image will come in the next line. Clearfix is a class in bootstrap

edited Aug 24 '16 at 08:38

answered Aug 24 '16 at 08:36

Webdesigner15

31
7

score 0 · Answer 2 · answered Aug 24 '16 at 08:56

A display: block; using a css on one of this two element will be enought. Indeed display: block tell a div to take all the width of the page.

<header class="site header" role="banner">
    <h1 id="logo" class="pull-right"><a href="/"> Logo of site</a>
    </h1>
</header>

<div id="">
    <div id="" class="" style="display:block;">      
        <img src="Images/1157217a.jpg?w=1800&fit=max&auto=compress,format&h=1800" width="240" height="312" alt="slideshow image">
     </div>
</div>

Or simply use bootstrap structurales classes as "container", "row" to create a new section above the header ?

score 0 · Answer 3 · answered Aug 24 '16 at 10:13

you can simply do with this float:left property, just check with this example

header {
  float:left;
  width:100%;
  background: #c1c1c1; /* just for showing the header */
  padding:15px;
}
.block-element {
  float:left;
  width:100%;
  background: #ddd; /* just for showing the div */
  padding:15px;
  margin-top:30px;
}

<header>
  <!-- something here -->
</header>

<div class="block-element">
  <!-- something here -->
</div>

<div class="block-element">
  <!-- something here -->
</div>

want to have tag in next line of tag

3 Answers3

want to have
tag in next line of
tag