Member Avatar for dwlamb_001
dwlamb_001 0 Light Poster

I have a challenge with placing a couple of small elements in a div using a liquid lay-out CSS.

The result I want can be seen here . My desired effect is the e-mail and CV in PDF links to the right of name at the top. However, I do not want them to push the name and text out of center. The lay-out in the example is done in layers using fixed CSS lay-out. I can't achieve the same result in liquid or elastic lay-out.

This is my HTML:

<div id="wrapper"><!-- overall wrapper to use middle of browser for 70% -->
  <div id="header"><!-- bordered white space area for name, links to e-mail and CV in PDF -->
    <div id="pdf">
      <a href="Daniel_Lamb_in_Brief.pdf">CV in PDF</a>
    </div><!-- end of pdf div -->
    <div id="name">
    <h1>
      Daniel Lamb, B.A.
    </h1>
    [continues with appropriates matching tags]

This is the corresponding CSS:

#wrapper{
  width: 70%;
  margin-left: 15%
}
#header{
  width: 100%;
  background-color: white;
  border-style: solid;
  border-color: #352B3F;
  border-width: thick;
  padding-bottom: 1%;
  margin-bottom: .75%;
  padding-right: 0.5%;
  padding-bottom: 2em;
  padding-left:  0.5%;
}
#pdf {
  float: right;
}

I've only included the 'pdf' elements for whatever the solution, I am certain the same concepts will apply to the e-mail icon hyperlink.

The challenge is the placement of either the pdf or e-mail links without interfering with the text in the header block area. Doing a fixed position lay-out, placement was possible using layers (z-index). Trying to apply the same technique now has no effect. If layering is not possible and I need to go with something such as an 85% area for the text and 13% area for the links (leaving 2% as gutter), is there a way to tweak the margins or padding so the centered appearance of the text is as though it is 100% the width of the header area?

Thanks for taking the time to read this and have a Great Day!

Daniel

  • 1 Contributor
  • 0 Replies
  • 82 Views

Dani AI

Generated

— two low-friction patterns work well in a liquid layout when you want small controls on the right without pushing a centered title.

One: take the controls out of the normal flow. Make the header a positioned container, absolutely position the small links at the right edge, and give the centered title a right-side gap (padding or an invisible spacer) equal to the links' visual width so the heading does not visually overlap the controls. Absolute-positioning keeps the links from changing the document flow; the right padding preserves the perceived centering.

Two: use CSS Grid (or a flexbox with a matching left spacer). Define three horizontal areas — left spacer, center title, right controls — with the center area centered. That guarantees the title is visually centered regardless of the controls' width, and it adapts cleanly as the container resizes.

Practical checks and tips:

  • Ensure the header is position: relative before using position: absolute on the links. z-index only affects positioned elements.
  • Vertically center an absolutely positioned control with top: 50% plus transform: translateY(-50%).
  • Reserve space for small screens: use a media query to stack or hide the controls when the container becomes too narrow.
  • If you need zero extra markup, a pseudo-element sized to match the right control can act as the left spacer.

More on positioning and layout patterns is on MDN: position and CSS Grid Layout.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.