Styling a component next to another using CSS

Question

Styling a component next to another using CSS

Struggling with a simple question here. I'm experimenting with HTML and CSS, trying to create a page with a central content box flanked by two arrow images on each side. While the concept isn't too difficult, I'm running into issues with using position: absolute; as resizing the window causes the elements to misbehave.

Here's my HTML:

<div id= "left_side">
  <a href=""><img id="leftArrow" src="images/lefta.png"/></a>
</div>

<div id="right_side">
  <a href=""><img id="rightArrow" src="images/righta.png"/></a>
</div>

<div id="content">
  <p>something</p>
  <p>more something</p>
</div>

And my CSS is structured like this:

#left_side {
  border: black solid 1px;
  position: absolute;
  left: 0;
  width: 10em;
  text-align: center;
  margin: 65px;
  border-radius: 8px 8px 8px 8px;
}

#right_side {
  border: black solid 1px;
  position: absolute;
  right: 0;
  width: 10em;
  text-align: center;
  margin: 65px 210px 0px 0px ;
  border-radius: 8px 8px 8px 8px;
}

#content {
  background-color: white;
  width: 500px;
  margin: 15px 320px 15px 320px;
  padding: 30px;
  border:5px;
  border-radius: 8px 8px 8px 8px;
}

I'm looking for advice on how to make the side images/buttons always stay relative to the content box regardless of screen size. Would nesting them in a bigger box be the best approach, or am I heading in the wrong direction altogether? Apologies for the basic question, positioning has always been a challenging aspect for me as a beginner.

Appreciate any help you can offer.

html css position

Answer 1

Answer №1

My preferred method for centering content involves using two wrapper divs without the need for absolute positioning in CSS:

.couter
{
    position: relative;
    left: 50%;
    float: left;
}
.cinner
{
    position: relative;
    left: -50%;
}

To implement this, I structure my HTML like so:

<div class="couter">
    <div class="cinner">
        <div id= "left_side">
          <a href=""><img id="leftArrow" src="images/lefta.png"/></a>
        </div>

        <div id="right_side">
          <a href=""><img id="rightArrow" src="images/righta.png"/></a>
        </div>

        <div id="content">
          <p>something</p>
          <p>more something</p>
        </div>
    </div>
</div>

Answer 2

My preferred method for centering content involves using two wrapper divs without the need for absolute positioning in CSS:

.couter
{
    position: relative;
    left: 50%;
    float: left;
}
.cinner
{
    position: relative;
    left: -50%;
}

To implement this, I structure my HTML like so:

<div class="couter">
    <div class="cinner">
        <div id= "left_side">
          <a href=""><img id="leftArrow" src="images/lefta.png"/></a>
        </div>

        <div id="right_side">
          <a href=""><img id="rightArrow" src="images/righta.png"/></a>
        </div>

        <div id="content">
          <p>something</p>
          <p>more something</p>
        </div>
    </div>
</div>

Answer 3

Answer №2

To allow the content to grow along with the page expansion, one method is as follows:

You can find a working example here: http://jsfiddle.net/VKBTy/

Additionally, I suggest utilizing a container box with position:relative for better control.

Answer 4

To allow the content to grow along with the page expansion, one method is as follows:

You can find a working example here: http://jsfiddle.net/VKBTy/

Additionally, I suggest utilizing a container box with position:relative for better control.

Answer 5

Answer №3

Here is a jsfiddle link where you can find a potential solution:

http://jsfiddle.net/simonweston/MuTEn/

HTML code snippet:

<div id= "left_side">
LEFT
</div>
<div id="content">
  <p>something</p>
  <p>more something</p>
</div>
<div id="right_side">
  RIGHT
</div>

CSS code snippet:

#left_side {
  border: black solid 1px;
  float: left;
  width: 10em;
  text-align: center;
  border-radius: 8px 8px 8px 8px;
}

#right_side {
  border: black solid 1px;
  float: left;
  width: 10em;
  text-align: center;
  border-radius: 8px 8px 8px 8px;
}

#content {
  background-color: red;
  float: left;
  width: 100px;
  border: 5px;
  border-radius: 8px 8px 8px 8px;
}

Answer 6

Here is a jsfiddle link where you can find a potential solution:

http://jsfiddle.net/simonweston/MuTEn/

HTML code snippet:

<div id= "left_side">
LEFT
</div>
<div id="content">
  <p>something</p>
  <p>more something</p>
</div>
<div id="right_side">
  RIGHT
</div>

CSS code snippet:

#left_side {
  border: black solid 1px;
  float: left;
  width: 10em;
  text-align: center;
  border-radius: 8px 8px 8px 8px;
}

#right_side {
  border: black solid 1px;
  float: left;
  width: 10em;
  text-align: center;
  border-radius: 8px 8px 8px 8px;
}

#content {
  background-color: red;
  float: left;
  width: 100px;
  border: 5px;
  border-radius: 8px 8px 8px 8px;
}

Answer 7

Answer №4

If you're looking for a simpler way to achieve the layout you want, I have made some modifications to your CSS:

#left_side {float:left;width:100px;padding:10px;}
#right_side {float:left;width:100px;padding:10px;}
#content {width:500px;float:left;background:blue;}
.clear{clear:both;}

Additionally, I adjusted your HTML as follows:

<div id= "left_side">
  <a href=""><img id="leftArrow" src="images/lefta.png"/></a>
</div>

<div id="content">
  <p>something</p>
  <p>more something</p>
</div>

<div id="right_side">
  <a href=""><img id="rightArrow" src="images/righta.png"/></a>
</div>

<div class="clear"></div>

Feel free to use this code to validate if it meets your requirements.

Answer 8

If you're looking for a simpler way to achieve the layout you want, I have made some modifications to your CSS:

#left_side {float:left;width:100px;padding:10px;}
#right_side {float:left;width:100px;padding:10px;}
#content {width:500px;float:left;background:blue;}
.clear{clear:both;}

Additionally, I adjusted your HTML as follows:

<div id= "left_side">
  <a href=""><img id="leftArrow" src="images/lefta.png"/></a>
</div>

<div id="content">
  <p>something</p>
  <p>more something</p>
</div>

<div id="right_side">
  <a href=""><img id="rightArrow" src="images/righta.png"/></a>
</div>

<div class="clear"></div>

Feel free to use this code to validate if it meets your requirements.

Styling a component next to another using CSS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Adjusting the height of a div inside a Material-UI Grid using Styled Components

Enhancing functionality with jQuery: updating multiple input fields at

Is there a way to smoothly navigate back to the top of the page after the fragment identifier causes the page to scroll down?

Turn off the Antd Datepicker tooltip

What is the proper way to insert a video using html5?

Guide on adjusting the CSS styling of elements in real-time from the backend using a user customization panel to modify the appearance of various web pages

Tips for dynamically updating an HTML value with Javascript

Incorporating list view separators using JQuery Mobile

Modifying the color of a placeholder in an HTML input using CSS

What is the best way to link to a CSS file located in a different directory while being in a subdirectory?

What is the best method to center a div on the screen?

Sending the results from a Vue.js component to a text input field in HTML

Get rid of the drop-down shadow effect

When attempting to render HTML containing multiple CSS classes within a JSON request parameter, the styles are not being applied as expected

Strange formatting in the internet explorer browser (IE)

Choosing various li classes within a navigation bar

Tips for ensuring uniform button height across all cards

Exploring CSS3 animations: customizing animations for individual elements based on scroll movements

Simultaneous Activation of Hover Effects on Multiple Elements

An interesting approach to utilizing toggle functionality in JQuery is by incorporating a feature that automatically closes the div when