Html css div not working

HTML & CSS
1

Hi i am having issue in placing div at their position when I entered text or image between them.
here is my html css code and below attach image is showing which I want to achieve.

<style>
body {
  background-image: url("1.JPG");
  background-repeat: repeat-x;
}
.wrapper {
      display: flex;
      flex-wrap: wrap;
      
    }
    
    .div {
      flex-basis: 50%;
   
    }
    
    .div1 {
margin-left: 100px;
      color: white;
    }
    .div2 {
    margin-left: 350px;
    }
    .div3 {
    margin-left: 100px;
    }
</style>
</head>
<body>
<div class="wrapper">
  <div class="div div1"><h5><b>Hi <b><?php echo htmlspecialchars($_SESSION["username"]); ?>!</b> Welcome to Hospital Management System</h5></div>
  <div class="div div2"><a href="logout.php" class="btn btn-danger ml-3">Sign Out</a></div>
  <div class="div div3"><a href="bill.php" class="logo me-auto"><img src="assets/img/logo.png" width = "100" height = "60"></a></div>
</div>
 
</body>
</html>

qq
qq1366×139 12.5 KB

2

This took me an embarassingly long time to figure out. You’ve got two opening b tags, and only one closing tag, which invalidates your HTML. Note: that should be handled in css regardless, since the b tag is deprecated.

But you can also do this easier with grid.

.wrapper {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
}

Here’s that with css. I added the backgrounds since I don’t have your images to work with…

That’s it - no need for the margins or any of that fun stuff.

3

I’m redesigning my own website and did a little mockup on Codepen maybe the following will help?

4

in above answer all three div displaying in one line , where as I also need margin and php code. anyway I did it with following code, but the problem is that I cannot write long sentense "welcome to hospital management system

<html>
<head>
<style>
body {
  background-image: url("1.JPG");
  background-repeat: repeat-x;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.div {
  flex: 1;
}

.div1 {
  margin-left: 100px;
  margin-top: 10px;
  color: white;
}

.div2 {
margin-left: 800px;
  margin-top: 2px;
}

.div3 {
 margin-left: 100px;
 margin-top: 15px;
  flex: 0 0 100%;
}
</style>
<body>
<div class="wrapper">
  <div class="div div1"><b>Hi! <?php echo htmlspecialchars($_SESSION["username"]); ?></b></div>
  <div class="div div2"><a href="logout.php" class="btn btn-danger ml-3">Sign Out</a></div>
  <div class="div div3">
    <a href="bill.php" class="logo me-auto"><img src="assets/img/logo.png" width="100" height="60"></a>
  </div>
</div>
 
</body>
</html>
5

Personally, I would let the image dictate the other two (the welcome message and button) as that looks like the easiest solution unless the green is part of the image? Though even then you could position the two without too much difficulty doing it that way.

1 Like
6

Unfortunately you have some basic logic errors assuming that this needs to be responsive?

The page has a constant horizontal scrollbar which is a cardinal error and a sign that things are not fitting as they should. This would indeed break mobile devices assuming you are designing responsively.

If you are designing for your screen only and no one else then you can ignore my comments but what do you think a margin-left:800px is going to show on a screen smaller than 800px?

800px is a magic number . As soon as you use extravagant measurements like that you create a dependency that has to be continually controlled depending on your content and the size and space available for the display. In reality it probably only works for you at your own screen size. although as you found out if you change the text then it doesn’t fit again.

You need a more logical approach without wild guessing and flex can move items left or right without needing widths by using auto margins that don’t care how big or small the screen is.

Flex can also align vertically so avoid trying to use margins to level variable content within the same context.

The code you posted has little structure and uses divs when none are needed and doesn’t encapsulate items logically. You have two items on the top line so create a header containing two items and not three!

You have been given some examples already but here’s how I would start to code that section. I’m making assumptions that you want to limit the width of the layout into a centred portion (because screens are so big these days and you can’t have a button 5000px away to the right). I’m also guessing that the blue strip should be full width but I have limited the content to a max-width. Full width layouts on large screens are not desirable.

This would be my opening gambit but could of course be redefined depending on the use case.

It will display roughly as per your initial drawing on a large screen but on a small screen it still displays fine (although that can also be changed with a media query but I didn’t want to get too complex at this early stage).

Iphone View:

codepen.io_paulobrien_full_abPGNXO_6973803fc91e7a7720356905e140cf8d(iPhone SE) (1)
codepen.io_paulobrien_full_abPGNXO_6973803fc91e7a7720356905e140cf8d(iPhone SE) (1)752×830 50.1 KB

There are no wild margins and no widths needed for those items.

1 Like