Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

CSS CSS: how to fit one <p> element floated left, and 2 div's, stacked to it's right side?

Your title, which wants a <p> floated left, and your codepen, which floats a div left, sends mixed signals. I went with your codepen.
I normally don't recommend setting heights, but this is needed here.
I suspect it's for training because you tied our hands and made this harder than it needed to be.
So, I believe an explanation as to how I did it is needed. I made the three divs and colored them to see how they reacted to my CSS. I used VSCode and the Go Live extension.
Here's what I came up with:
Code:
<!DOCTYPE html>
<html lang="en">
 <head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#main{
  width: 650px;
  height: 350px;
  margin: auto;
}
p{
  font-weight: bolder;
  font-size: larger;
}
div {
  height: 300px;
}
#logo {
  background-color: azure;
  width: 200px;
  float: left;
  text-align: center;
}
#header-tekst {
  background-color: burlywood;
  width: 400px;
  height: 100px;
  text-align: center;
  float: right;
}
#header-bottom {
  background-color: cadetblue;
  width: 360px;
  height: 200px;
  padding: 20px;
  float: right;
}
</style>
</head>
<body>
  <div id="main">
    <div id="logo">
      <p><img src="logo.jpg" alt="Logo" width="150" height="148"></p>
      <p>Welcome</p>
      <p>Welkom</p>
    </div>

    <div>
      <div id="header-tekst">
        <h1>Dit is h1 header tekst</h1>
      </div>

      <div id="header-bottom">
        <p>The world, as we know it, is about to end! Run for cover</p>
      </div>
    </div>
</div>
</body>
</html>
 
Your title, which wants a <p> floated left, and your codepen, which floats a div left, sends mixed signals. I went with your codepen.
I normally don't recommend setting heights, but this is needed here.
I suspect it's for training because you tied our hands and made this harder than it needed to be.
So, I believe an explanation as to how I did it is needed. I made the three divs and colored them to see how they reacted to my CSS. I used VSCode and the Go Live extension.
Here's what I came up with:
That is an interesting approach, I had not thought of that: limit the main div width and right float the two adjacent div's. Thank you for that idea!
Now what if I want within the div "header-tekst" another 3 <p> elements, placed horizontally?
See here for my attempt (I can't get the p elements to appear, and the style commands used are required for a rollover button function): https://codepen.io/erik84750/pen/qBPbqdp

I.e.: the rollover button is used here on my site: https://www.studio61.be/home-en.html#tarieven



Grts,
Erik
 
I did not know the <p> element supported the width and height attributes.
My revised code. I removed the style for the div{height: 300px;}. And the height: 250px; in #header-tekst so it can grow.
Code:
<!DOCTYPE html>
<html lang="en">
 <head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#main{
  width: 650px;
  //height: 350px;
  margin: auto;
}
p{
  font-weight: bolder;
  font-size: larger;
}
#logo {
  background-color: azure;
  width: 200px;
  float: left;
  text-align: center;
}
#header-tekst {
  background-color: burlywood;
  width: 400px;
  text-align: center;
  float: right;
}
#header-bottom {
  background-color: cadetblue;
  width: 360px;
  height: 200px;
  padding: 20px;
  float: right;
}
#header-tekst p{
  display: none;
}
#header-tekst a{
  border: 1px black solid;
  padding:  5px;
  position: relative;
  top: -15px;
}
#header-tekst a:hover ~ p{
  display: block;
}
</style>
</head>
<body>
  <div id="main">
    <div id="logo">
      <p><img src="logo.jpg" alt="Logo" width="150" height="148"></p>
      <p>Welcome</p>
      <p>Welkom</p>
    </div>

    <div>
      <div id="header-tekst">
        <h1>Dit is h1 header tekst</h1>
          <a>Hover and see</a>
          <p class="taal-en">Welcome-en</p>
          <p class="taal-fr">Bienvenu-fr</p>
          <p class="taal-nl">Welkom-nl</p>
      </div>

      <div id="header-bottom">
        <p>The world, as we know it, is about to end! Run for cover</p>
      </div>
    </div>
</div>
</body>
</html>
 
I did not know the <p> element supported the width and height attributes.
My revised code. I removed the style for the div{height: 300px;}. And the height: 250px; in #header-tekst so it can grow.
Hi Oldman, changes applied yet the 3 language texts still not visible, at hover neither. Where would they be gone?
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom